mobile improvements mostly

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#7

.gitignore

@@ -23,3 +23,13 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 AGENTS.md
+
+# Local agent/editor config
+.claude/
+
+# paraglide compiles the message runtime into the source tree
+/src/lib/paraglide
+/.inlang
+
+# Claude Code scratch: throwaway probe scripts, never committed
+/.scratch

README.md

@@ -1,4 +1,4 @@
-# Open-Meteo Weather Web
+# Drizz.li
 
 An open-source, high-performance weather forecast website built with SvelteKit and powered by the [Open-Meteo APIs](https://open-meteo.com/).
 
@@ -11,7 +11,7 @@ Our objective is to provide a comprehensive, user-friendly weather platform for
 - **Framework**: [SvelteKit](https://kit.svelte.dev/)
 - **Language**: [TypeScript](https://www.typescriptlang.org/)
 - **Data Source**: [Open-Meteo API](https://open-meteo.com/)
-- **Visualization**: [Highcharts](https://www.highcharts.com/) (Current, transitioning to a more flexible charting library in the future)
+- **Visualization**: custom canvas charts (`src/lib/charts`)
 
 ## Developing
 
@@ -33,3 +33,61 @@ npm run build
 ```
 
 You can preview the production build with `npm run preview`.
+
+## Deployment (static hosting)
+
+The build output in `build/` is a fully static site. Two pieces of server
+configuration are needed:
+
+### 1. SPA fallback
+
+Pages that are not prerendered (unlisted cities, GPS coordinate routes like
+`/weather/week/52.09N5.12E/`) are served by `404.html`, which boots the app
+and resolves the location client-side. Configure the server to serve
+`404.html` for unknown paths.
+
+### 2. Cross-origin isolation (SharedArrayBuffer for the embedded map)
+
+The `/weather/maps/` page embeds `maps.open-meteo.com`, which uses
+`SharedArrayBuffer` for its decoding worker pool. A cross-origin iframe only
+gets `SharedArrayBuffer` when the **embedding** page is cross-origin
+isolated, so this site must be served with:
+
+```
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+(The map already serves `Cross-Origin-Resource-Policy: cross-origin` and its
+own COOP/COEP, so it is embeddable under these headers. All other assets are
+same-origin and the weather APIs are CORS requests, so `require-corp` is safe
+here.)
+
+### Example: Caddy
+
+```caddy
+drizzli.example.com {
+	root * /srv/drizzli
+	file_server
+	try_files {path} {path}/ /404.html
+	header {
+		Cross-Origin-Opener-Policy "same-origin"
+		Cross-Origin-Embedder-Policy "require-corp"
+	}
+}
+```
+
+### Example: nginx
+
+```nginx
+server {
+	server_name drizzli.example.com;
+	root /srv/drizzli;
+	error_page 404 /404.html;
+	add_header Cross-Origin-Opener-Policy "same-origin" always;
+	add_header Cross-Origin-Embedder-Policy "require-corp" always;
+	location / {
+		try_files $uri $uri/ =404;
+	}
+}
+```

cspell.json

@@ -1,3 +0,0 @@
-{
-	"userWords": ["ConfigInterface"]
-}

eslint.config.js

@@ -25,6 +25,10 @@ export default defineConfig(
 			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
 			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
 			'no-undef': 'off',
+			// Internal links go through `href()` / `gotoLocalized()` from $lib/i18n,
+			// which call resolve() and then add the locale prefix. The rule only
+			// recognises a literal resolve() call, so it cannot see through them.
+			'svelte/no-navigation-without-resolve': 'off',
 			'@typescript-eslint/no-unused-vars': [
 				'error',
 				{

messages/de.json

@@ -0,0 +1,389 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"nav_week": "7-Tage-Vorhersage",
+	"nav_compare": "Modellvergleich",
+	"nav_14day": "14-Tage-Vorhersage",
+	"nav_seasonal": "Saisonal",
+	"nav_historical": "Rückblick",
+	"nav_maps": "Karten",
+	"nav_collapse": "Einklappen",
+	"nav_expand_sidebar": "Seitenleiste ausklappen",
+	"nav_collapse_sidebar": "Seitenleiste einklappen",
+	"nav_home": "Drizzli Startseite",
+	"nav_toggle_menu": "Menü umschalten",
+	"search_placeholder": "Ort suchen …",
+	"settings_title": "Einstellungen",
+	"units_title": "Einheiten",
+	"units_aria": "Maßeinheiten wählen",
+	"unit_temperature": "Temperatur",
+	"unit_wind_speed": "Windgeschwindigkeit",
+	"unit_precipitation": "Niederschlag",
+	"theme_label": "Design",
+	"theme_system": "System",
+	"theme_light": "Hell",
+	"theme_dark": "Dunkel",
+	"theme_follow_system": "Design: System folgen",
+	"theme_light_title": "Design: hell",
+	"theme_dark_title": "Design: dunkel",
+	"language_label": "Sprache",
+	"supporter_active": "Unterstützer-Extras aktiv",
+	"supporter_support": "Drizz.li unterstützen",
+	"supporter_manage_key": "Zugangsschlüssel verwalten",
+	"supporter_unlock": "Unterstützer-Extras freischalten",
+	"supporter_badge": "Unterstützer",
+	"strip_past_label": "zurück",
+	"strip_past_aria": "Die letzten 3 Tage laden",
+	"strip_days_label": "Tage",
+	"strip_extend_aria": "Die vollen 15 Tage anzeigen",
+	"strip_history_label": "Archiv",
+	"strip_history_aria": "Wetterarchiv öffnen",
+	"strip_history_title": "Rückblick: jedes Datum zurück bis 1940",
+	"strip_seasonal_label": "saisonal",
+	"strip_seasonal_aria": "Saisonale Aussichten öffnen",
+	"strip_seasonal_title": "Saisonale Aussichten: Monatstrends für die kommenden Monate",
+	"day_today": "Heute",
+	"day_tomorrow": "Morgen",
+	"day_yesterday": "Gestern",
+	"page_week_subtitle": "7-Tage-Vorhersage",
+	"page_compare_subtitle": "Modellvergleich",
+	"page_14day_subtitle": "14-Tage-Ensemblevorhersage",
+	"page_seasonal_subtitle": "Saisonale Aussichten",
+	"page_historical_subtitle": "Wetterrückblick",
+	"hourly_heading": "stündlich",
+	"hourly_variables": "Variablen",
+	"meteograms_heading": "Meteogramme",
+	"meteograms_customize": "Anpassen",
+	"meteograms_zoom_hint": "Ziehen oder",
+	"meteograms_zoom_hint_end": "+ Scrollen zum Zoomen",
+	"range_today": "Heute",
+	"range_selected_day": "Gewählter Tag",
+	"range_3_days": "3 Tage",
+	"range_5_days": "5 Tage",
+	"range_all": "Alles",
+	"range_group_aria": "Zeitraum des Diagramms",
+	"reset_zoom": "Zoom zurücksetzen",
+	"default_range_title": "Standard-Zeitraum",
+	"default_range_auto": "Auto",
+	"default_range_auto_hint": "3 Tage auf dem Handy, alles auf größeren Bildschirmen",
+	"summary_heading": "in Worten",
+	"summary_no_data": "Für diesen Tag liegen keine Stundenwerte vor.",
+	"label_sunrise": "Sonnenaufgang",
+	"label_sunset": "Sonnenuntergang",
+	"label_daylight": "Tageslicht",
+	"label_uv_index": "UV-Index",
+	"label_moonrise": "Mondaufgang",
+	"label_moonset": "Monduntergang",
+	"label_moon": "Mond",
+	"daylight_hours": "{hours} Std. {minutes} Min.",
+	"sunshine_share": "{percent}% Sonne",
+	"uv_low": "Niedrig",
+	"uv_moderate": "Mäßig",
+	"uv_high": "Hoch",
+	"uv_very_high": "Sehr hoch",
+	"uv_extreme": "Extrem",
+	"moon_new": "Neumond",
+	"moon_waxing_crescent": "Zunehmende Sichel",
+	"moon_first_quarter": "Erstes Viertel",
+	"moon_waxing_gibbous": "Zunehmender Mond",
+	"moon_full": "Vollmond",
+	"moon_waning_gibbous": "Abnehmender Mond",
+	"moon_last_quarter": "Letztes Viertel",
+	"moon_waning_crescent": "Abnehmende Sichel",
+	"cond_clear": "klar",
+	"cond_fair": "teils bewölkt",
+	"cond_cloudy": "bedeckt",
+	"cond_fog": "neblig",
+	"cond_drizzle": "nieselig",
+	"cond_rain": "regnerisch",
+	"cond_snow": "schneereich",
+	"cond_thunder": "stürmisch",
+	"period_overnight": "nachts",
+	"period_morning": "morgens",
+	"period_afternoon": "nachmittags",
+	"period_evening": "in den Abendstunden",
+	"footer_tagline": "Schnelle, unkomplizierte Wettervorhersagen auf Basis offener Daten.",
+	"footer_data_by": "Wetterdaten von",
+	"footer_forecasts": "Vorhersagen",
+	"footer_popular": "Beliebte Orte",
+	"footer_about_section": "Über",
+	"model_weather": "Wettermodell",
+	"model_ensemble": "Ensemblemodell",
+	"sky_all_1": "Den ganzen Tag {condition}.",
+	"sky_all_2": "Ein durchweg {condition} Tag.",
+	"sky_all_3": "Es bleibt durchgehend {condition}.",
+	"sky_two_1": "{p1} {c1}, {p2} dann {c2}.",
+	"sky_two_2": "Der Tag beginnt {p1} {c1}, bevor es {p2} {c2} wird.",
+	"sky_two_3": "{p1} {c1}, {p2} dann {c2}.",
+	"sky_three_1": "{p1} {c1}, {p2} {c2} und {p3} dann {c3}.",
+	"sky_three_2": "Es beginnt {p1} {c1}, wird {p2} {c2} und endet {p3} {c3}.",
+	"sky_three_3": "{p1} {c1}, {p2} {c2}, {p3} schließlich {c3}.",
+	"temp_1": "Höchstwerte um {high}, nachts Abkühlung auf {low}.",
+	"temp_2": "Die Temperaturen steigen auf {high} und fallen nach Einbruch der Dunkelheit auf {low}.",
+	"temp_3": "Zwischen {low} und {high} im Tagesverlauf.",
+	"temp_feels_1": "Höchstwerte um {high}, nachts {low} - gefühlt eher {feels}.",
+	"temp_feels_2": "Bis {high} am Thermometer, gefühlt {feels}, bevor es auf {low} zurückgeht.",
+	"temp_feels_3": "Es werden {high} erreicht, gefühlt sind es {feels}, später Abkühlung auf {low}.",
+	"precip_window_1": "Rund {amount} Niederschlag, das meiste davon {when}.",
+	"precip_window_2": "Zu erwarten sind etwa {amount}, konzentriert {when}.",
+	"precip_window_3": "Am nassesten wird es {when}, insgesamt rund {amount}.",
+	"precip_spread_1": "Rund {amount} Niederschlag über den Tag verteilt.",
+	"precip_spread_2": "Etwa {amount} fallen in Schüben über den Tag.",
+	"precip_spread_3": "Immer wieder Schauer, zusammen etwa {amount}.",
+	"precip_chance_1": "Überwiegend trocken, mit bis zu {percent}% Schauerwahrscheinlichkeit.",
+	"precip_chance_2": "Kaum Regen zu erwarten, die Schauerwahrscheinlichkeit liegt bei {percent}%.",
+	"precip_chance_3": "{percent}% Schauerrisiko, aber kaum der Rede wert.",
+	"precip_dry_1": "Es bleibt durchweg trocken.",
+	"precip_dry_2": "Kein Tropfen in Sicht.",
+	"precip_dry_3": "Von früh bis spät trocken.",
+	"wind_dir_1": "Wind aus {direction} mit bis zu {speed}.",
+	"wind_dir_2": "Eine Brise aus {direction} erreicht in der Spitze {speed}.",
+	"wind_dir_3": "Der Wind kommt aus {direction} und erreicht Spitzen um {speed}.",
+	"wind_dir_gusts_1": "Wind aus {direction} mit bis zu {speed}, in Böen {gust}.",
+	"wind_dir_gusts_2": "Ein {direction}-Wind von {speed}, in Böen bis {gust}.",
+	"wind_dir_gusts_3": "Aus {direction} sind {speed} zu erwarten, zeitweise Böen von {gust}.",
+	"wind_1": "Wind mit bis zu {speed}.",
+	"wind_2": "Die Brise erreicht rund {speed}.",
+	"wind_3": "Luftbewegung von bis zu {speed}.",
+	"wind_gusts_1": "Wind mit bis zu {speed}, in Böen {gust}.",
+	"wind_gusts_2": "Bis zu {speed}, mit Böen von {gust}.",
+	"wind_gusts_3": "Ein böiger Tag: {speed} im Mittel, {gust} in der Spitze.",
+	"calm_1": "Kaum ein Lüftchen.",
+	"calm_2": "Die Luft bleibt nahezu still.",
+	"calm_3": "Den ganzen Tag so gut wie windstill.",
+	"uv_1": "UV-Index bis {value} ({label}) - mittags an Sonnenschutz denken.",
+	"uv_2": "Mittags brennt die Sonne: UV {value}, {label}.",
+	"uv_3": "Mittags besser in den Schatten - der UV-Index erreicht {value} ({label}).",
+	"legal_about": "Über uns",
+	"legal_imprint": "Impressum",
+	"legal_privacy": "Datenschutz",
+	"legal_terms": "Bedingungen",
+	"legal_nav": "Rechtliches",
+	"city_weather": "Wetter in {city}",
+	"var_temperature": "Temperatur",
+	"var_temperature_short": "Temp",
+	"var_icons": "Wettersymbole",
+	"var_icons_short": "Symbole",
+	"var_apparent": "Gefühlte Temp.",
+	"var_apparent_short": "Gefühlt",
+	"var_dew_point": "Taupunkt",
+	"var_dew_point_short": "Tau",
+	"var_cloud": "Bewölkung",
+	"var_cloud_short": "Wolken",
+	"var_cloud_low": "Bewölkung tief",
+	"var_cloud_low_short": "Tief",
+	"var_cloud_mid": "Bewölkung mittel",
+	"var_cloud_mid_short": "Mittel",
+	"var_cloud_high": "Bewölkung hoch",
+	"var_cloud_high_short": "Hoch",
+	"var_precipitation": "Niederschlag",
+	"var_precipitation_short": "Nied.",
+	"var_pop": "Niederschlagswahrsch.",
+	"var_pop_short": "Wahrsch.",
+	"var_rain": "Regen",
+	"var_rain_short": "Regen",
+	"var_showers": "Schauer",
+	"var_showers_short": "Schauer",
+	"var_snowfall": "Schneefall",
+	"var_snowfall_short": "Schnee",
+	"var_wind": "Windgeschwindigkeit",
+	"var_wind_short": "Wind",
+	"var_wind_dir": "Windrichtung",
+	"var_wind_dir_short": "Richt.",
+	"var_gusts": "Windböen",
+	"var_gusts_short": "Böen",
+	"var_humidity": "Luftfeuchte",
+	"var_humidity_short": "RF",
+	"var_pressure": "Luftdruck (MSL)",
+	"var_pressure_short": "MSLP",
+	"var_surface_pressure": "Bodendruck",
+	"var_surface_pressure_short": "Psfc",
+	"var_uv": "UV-Index",
+	"var_uv_short": "UV",
+	"var_visibility": "Sichtweite",
+	"var_visibility_short": "Sicht",
+	"var_cape": "CAPE",
+	"var_cape_short": "CAPE",
+	"var_time": "Zeit",
+	"no_data_title": "Für dieses Modell gibt es hier keine Daten",
+	"no_data_body": "Das gewählte Wettermodell deckt {location} nicht ab - regionale Modelle liefern nur Daten in ihrem eigenen Gebiet.",
+	"no_data_try_city": "Ort auf {city} ändern",
+	"no_data_best_match": "Zu „Best match“ wechseln",
+	"model_archive": "Reanalyse",
+	"model_seasonal": "Saisonmodell",
+	"nearby_cities_title": "Städte in der Nähe",
+	"nearby_cities_subtitle": "Höchst- und Tiefstwerte für den gewählten Tag",
+	"supporter_dialog_title": "Drizz.li Unterstützer",
+	"supporter_dialog_desc": "Fügen Sie den Zugangsschlüssel aus Ihrer Unterstützer-E-Mail ein, um die Extras freizuschalten.",
+	"supporter_extras_active": "Unterstützer-Extras sind aktiv",
+	"supporter_lifetime": "Lebenslanger Zugang",
+	"supporter_active_until": "Aktiv bis {date}",
+	"supporter_access_key": "Zugangsschlüssel",
+	"supporter_key_invalid": "Dieser Schlüssel ist ungültig oder abgelaufen.",
+	"supporter_server_unreachable": "Der Server ist nicht erreichbar. Prüfen Sie Ihre Verbindung und versuchen Sie es erneut.",
+	"supporter_verifying": "Wird geprüft…",
+	"supporter_unlock_button": "Freischalten",
+	"supporter_remove_key": "Schlüssel von diesem Gerät entfernen",
+	"supporter_no_key_yet": "Noch keinen Schlüssel?",
+	"supporter_support_from": "Das Projekt ab {price} unterstützen",
+	"supporter_checking": "Ihr Zugang wird geprüft…",
+	"supporter_gate_title": "{feature} ist ein Unterstützer-Extra",
+	"supporter_gate_body": "Drizz.li ist kostenlos und quelloffen. Mit einem Beitrag ab {price} halten Sie es am Laufen - als Dankeschön schalten Unterstützer die Extras frei.",
+	"supporter_become": "Unterstützer werden",
+	"supporter_have_key": "Ich habe einen Schlüssel",
+	"supporter_key_expired": "Ihr gespeicherter Schlüssel ist ungültig oder abgelaufen.",
+	"supporter_enter_key": "Geben Sie Ihren Zugangsschlüssel ein.",
+	"supporter_perk_historical": "Historisches Wetter und Vergleich mit Klimanormalen",
+	"supporter_perk_seasonal": "Saisonale Aussichten: kommende Monate gegen die Klimanormale",
+	"supporter_perk_future": "Neue Unterstützer-Extras, sobald sie erscheinen",
+	"action_close": "Schliessen",
+	"action_done": "Fertig",
+	"action_try_again": "Erneut versuchen",
+	"action_reset_defaults": "Auf Standard zurücksetzen",
+	"customize_meteograms": "Meteogramme anpassen",
+	"customizer_intro": "Ziehen Sie Variablen zwischen den Diagrammen, um Ihr eigenes Layout zu bauen.",
+	"customizer_chart_n": "Diagramm {number}",
+	"customizer_delete_chart": "Diagramm {number} löschen",
+	"customizer_add_chart": "+ Diagramm hinzufügen",
+	"customizer_available": "Verfügbare Variablen",
+	"customizer_drag": "{variable} ziehen",
+	"customizer_remove": "{variable} entfernen",
+	"customizer_drop_here": "Variablen hierher ziehen",
+	"customizer_all_in_use": "Alle Variablen sind in Verwendung",
+	"variables_aria": "Variablenauswahl",
+	"variables_close": "Variablenauswahl schliessen",
+	"variables_table_section": "Stundentabelle",
+	"variables_move_up": "{variable} nach oben verschieben",
+	"variables_move_down": "{variable} nach unten verschieben",
+	"variables_charts_hint_before": "Meteogramm-Variablen konfigurieren Sie über die Schaltfläche",
+	"variables_charts_hint_after": "über den Diagrammen.",
+	"table_customize": "Variablen anpassen",
+	"table_interval_aria": "Stundenintervall",
+	"table_now": "Jetzt",
+	"interval_toggle": "Zwischen 1- und 3-Stunden-Intervall wechseln",
+	"charts_loading": "Diagramme werden geladen…",
+	"chart_download": "Meteogramm als PNG-Bild herunterladen",
+	"chart_credit_viz": "Visualisierung von",
+	"chart_toggle_series": "{series} ein- oder ausblenden",
+	"legend_show": "Legende anzeigen",
+	"meteograms_none_before": "Keine Meteogramme konfiguriert,",
+	"meteograms_none_action": "fügen Sie Variablen hinzu",
+	"meteograms_none_historical": "Keine Meteogramme konfiguriert. Fügen Sie Variablen auf der 7-Tage-Seite hinzu.",
+	"search_searching": "Wird gesucht…",
+	"search_favorites": "Favoriten",
+	"search_recent": "Zuletzt",
+	"search_hint": "Tippen Sie los oder nutzen Sie GPS, um Ihren Standort zu bestimmen",
+	"search_no_results": "Keine Orte gefunden",
+	"search_remove_recent": "{location} aus den letzten Orten entfernen",
+	"search_remove_recent_short": "Aus den letzten entfernen",
+	"search_aria": "Ort suchen",
+	"search_gps": "GPS-Standort verwenden",
+	"model_automatic_selection": "Automatische Auswahl",
+	"model_selector_aria": "Auswahl: {label}",
+	"compare_models_heading": "Modelle",
+	"compare_variables_heading": "Stündliche Wettervariablen",
+	"compare_standard_preset": "Standardvergleich",
+	"compare_weather_conditions": "Wetterlage & Gesamtbewölkung",
+	"compare_wind_direction_height": "Windrichtung in {height} m",
+	"compare_standard_preset_description": "Ein ausgewogener Ausgangspunkt für den Vergleich von Vorhersagemodellen.",
+	"compare_preset_active": "Aktiv",
+	"compare_custom_selection": "Benutzerdefiniert · {count} ausgewählt",
+	"compare_customize_variables": "Variablen anpassen",
+	"compare_restore_defaults": "Standard wiederherstellen",
+	"compare_variables_pending": "Variablenauswahl geändert",
+	"compare_selected_models": "Ausgewählte Modelle",
+	"compare_selection_pending": "Auswahl geändert",
+	"compare_apply_selection": "Anwenden & Diagramme neu laden",
+	"compare_discard_changes": "Änderungen verwerfen",
+	"compare_customize_models": "Modelle anpassen",
+	"compare_edit_models": "Modelle bearbeiten",
+	"compare_edit_variables": "Variablen bearbeiten",
+	"compare_edit_models_description": "Modelle suchen oder ganze Anbietergruppen auswählen.",
+	"compare_edit_variables_description": "Variablen suchen oder ganze Themengruppen auswählen.",
+	"compare_search_models": "Modelle suchen",
+	"compare_search_variables": "Variablen suchen",
+	"compare_show_model_names": "Modellnamen anzeigen",
+	"compare_hide_model_names": "Modellnamen ausblenden",
+	"compare_only_selected": "Nur ausgewählte",
+	"compare_select_group": "Alle auswählen",
+	"compare_clear_group": "Alle abwählen",
+	"compare_no_matching_options": "Keine passenden Optionen.",
+	"compare_no_models_selected": "Keine Modelle ausgewählt.",
+	"compare_remove_model": "{model} entfernen",
+	"compare_timeline_title": "Zeitleiste des Modellvergleichs",
+	"compare_model_label": "Modell",
+	"page_compare_title": "Wettermodelle vergleichen",
+	"page_compare_description": "Stündliche Vorhersagen mehrerer Wettermodelle für jeden Ort vergleichen.",
+	"compare_direction_subtitle": "Richtungsstreuung über {count} Modelle · kein Mittelwert",
+	"compare_scalar_subtitle": "Über {count} Modelle · gestrichelt = Modellmittel",
+	"compare_precipitation_subtitle": "Über {count} Modelle · unterer Streifen = Niederschlagsübereinstimmung",
+	"compare_precipitation_agreement": "Übereinstimmung",
+	"compare_precipitation_agreement_tooltip": "{wet}/{available} mit Niederschlag · Median {median} {unit} · Spanne {min}–{max} {unit}",
+	"compare_model_mean": "Modellmittel",
+	"compare_showing_previous": "Der vorherige erfolgreiche Vergleich bleibt sichtbar.",
+	"compare_empty_selection": "Mindestens ein Modell und eine Wettervariable auswählen.",
+	"compare_no_data": "Keines der ausgewählten Modelle liefert für diesen Ort und diese Auswahl nutzbare Daten.",
+	"compare_weather_codes_only": "Wetterlage und Gesamtbewölkung erscheinen unten in der Modellzeitleiste. Für ein Diagramm eine weitere Variable auswählen.",
+	"compare_model_colors": "Modellfarben",
+	"compare_group_temperature": "Temperatur & Feuchte",
+	"compare_group_precipitation": "Niederschlag & Wetter",
+	"compare_group_clouds": "Druck & Wolken",
+	"compare_group_wind": "Wind & Atmosphäre",
+	"compare_group_upper_air": "Temperatur in der Höhe",
+	"compare_many_models_warning": "{count} Modelle sind ausgewählt. Der Vergleich kann langsamer und die Farben schwerer unterscheidbar sein.",
+	"compare_timeline_hint": "Wetter nach Modell; der Piktogramm-Hintergrund zeigt die Gesamtbewölkung",
+	"compare_timeline_scroll_aria": "Scrollbare Wetterzeitleiste der Modelle",
+	"compare_timeline_caption": "Stündliche Wetterbedingungen nach Vorhersagemodell",
+	"ensemble_trimmed": "Das Ensemble dieses Modells reicht nur etwa {days} Tage voraus, die Streuung ist auf den verfügbaren Zeitraum gekürzt.",
+	"seasonal_explainer_before": "Eine saisonale Vorhersage zeigt, wie stark ein ganzer Monat voraussichtlich",
+	"seasonal_explainer_strong": "von seiner Klimanormalen abweicht",
+	"seasonal_explainer_after": "- nicht das Wetter an einem einzelnen Tag. Lesen Sie den Monatstrend und die Übereinstimmung des Ensembles, nicht die täglichen Ausschläge.",
+	"seasonal_runs_to": "Diese Aussicht reicht bis {date}.",
+	"seasonal_range_aria": "Zeitraum der Aussichten",
+	"seasonal_no_normal": "keine Normale für diesen Monat",
+	"normals_loading": "Normale wird geladen…",
+	"normals_loading_period": "Normale 1991–2020 wird geladen…",
+	"normal_band_legend": "Normalband = Mittel 1991–2020",
+	"anomaly_vs_normal": "{value} gegenüber Normal",
+	"stat_avg_temperature": "Durchschnittstemperatur",
+	"stat_mean_temperature": "Mitteltemperatur",
+	"stat_total_precipitation": "Niederschlagssumme",
+	"stat_warmest_day": "Wärmster Tag",
+	"stat_coldest_day": "Kältester Tag",
+	"historical_daily_heading": "Täglich",
+	"historical_daily_hint": "– Tag wählen für Stundenwerte",
+	"historical_full_range": "– gesamter Zeitraum",
+	"historical_from": "Von",
+	"historical_to": "Bis",
+	"historical_quick_ranges": "Schnellauswahl",
+	"historical_last_days": "{days} Tage",
+	"historical_month_last_year": "Monat, Vorjahr",
+	"label_day": "Tag",
+	"label_night": "Nacht",
+	"daycards_past": "Letzte 3 Tage",
+	"daycards_load_15": "15 Tage laden",
+	"error_technical_details": "Technische Details",
+	"err_network_title": "Der Wetterdienst ist nicht erreichbar",
+	"err_network_hint": "Prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.",
+	"err_nodata_title": "Keine Daten für diesen Ort mit dem gewählten Modell",
+	"err_nodata_hint": "Regionale Wettermodelle decken nur ihr eigenes Gebiet ab - \"Best match\" wählt automatisch ein passendes Modell.",
+	"err_rejected_title": "Der Wetterdienst hat die Anfrage abgelehnt",
+	"err_rejected_hint": "Versuchen Sie andere Einstellungen oder stellen Sie das Modell auf \"Best match\" zurück.",
+	"err_generic_title": "Die Wetterdaten konnten nicht geladen werden",
+	"err_generic_hint": "Versuchen Sie es gleich noch einmal. Wenn es weiterhin auftritt, wechseln Sie zum Modell \"Best match\".",
+	"maps_iframe_title": "Interaktive Karte von Open-Meteo",
+	"page_maps_title": "Wetterkarte",
+	"page_week_title": "Wetter",
+	"search_favorite_add": "Zu Favoriten hinzufügen",
+	"search_favorite_remove": "Aus Favoriten entfernen",
+	"supporter_price_per_month": "{amount} / Monat",
+	"model_best_match_hint": "Wählt automatisch das beste Modell für diesen Ort",
+	"model_updated": "aktualisiert {cadence}",
+	"cadence_every_hour": "stündlich",
+	"cadence_every_hours": "alle {hours} h",
+	"cadence_daily": "täglich",
+	"cadence_monthly": "monatlich",
+	"cadence_varies": "variiert",
+	"model_group_automatic": "Automatisch",
+	"model_group_reanalysis": "ECMWF-Reanalyse",
+	"model_group_regional_reanalysis": "Regionale Reanalyse"
+}

messages/en.json

@@ -0,0 +1,389 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"nav_week": "7-Day Forecast",
+	"nav_compare": "Model Comparison",
+	"nav_14day": "14-Day Forecast",
+	"nav_seasonal": "Seasonal",
+	"nav_historical": "Historical",
+	"nav_maps": "Maps",
+	"nav_collapse": "Collapse",
+	"nav_expand_sidebar": "Expand sidebar",
+	"nav_collapse_sidebar": "Collapse sidebar",
+	"nav_home": "Drizzli home",
+	"nav_toggle_menu": "Toggle menu",
+	"search_placeholder": "Search location...",
+	"settings_title": "Settings",
+	"units_title": "Units",
+	"units_aria": "Choose measurement units",
+	"unit_temperature": "Temperature",
+	"unit_wind_speed": "Wind speed",
+	"unit_precipitation": "Precipitation",
+	"theme_label": "Theme",
+	"theme_system": "System",
+	"theme_light": "Light",
+	"theme_dark": "Dark",
+	"theme_follow_system": "Theme: follow system",
+	"theme_light_title": "Theme: light",
+	"theme_dark_title": "Theme: dark",
+	"language_label": "Language",
+	"supporter_active": "Supporter extras active",
+	"supporter_support": "Support Drizz.li",
+	"supporter_manage_key": "Manage your access key",
+	"supporter_unlock": "Unlock the supporter extras",
+	"supporter_badge": "Supporter",
+	"strip_past_label": "past",
+	"strip_past_aria": "Load the past 3 days",
+	"strip_days_label": "days",
+	"strip_extend_aria": "Show the full 15-day forecast",
+	"strip_history_label": "history",
+	"strip_history_aria": "Open the historical weather archive",
+	"strip_history_title": "Historical weather: any past date back to 1940",
+	"strip_seasonal_label": "seasonal",
+	"strip_seasonal_aria": "Open the seasonal outlook",
+	"strip_seasonal_title": "Seasonal outlook: monthly trends for the months ahead",
+	"day_today": "Today",
+	"day_tomorrow": "Tomorrow",
+	"day_yesterday": "Yesterday",
+	"page_week_subtitle": "7-day forecast",
+	"page_compare_subtitle": "Model comparison",
+	"page_14day_subtitle": "14-day ensemble forecast",
+	"page_seasonal_subtitle": "Seasonal outlook",
+	"page_historical_subtitle": "Historical weather",
+	"hourly_heading": "hourly",
+	"hourly_variables": "Variables",
+	"meteograms_heading": "Meteograms",
+	"meteograms_customize": "Customize",
+	"meteograms_zoom_hint": "drag or",
+	"meteograms_zoom_hint_end": "+ scroll to zoom",
+	"range_today": "Today",
+	"range_selected_day": "Selected day",
+	"range_3_days": "3 days",
+	"range_5_days": "5 days",
+	"range_all": "All",
+	"range_group_aria": "Chart time range",
+	"reset_zoom": "Reset zoom",
+	"default_range_title": "Default time range",
+	"default_range_auto": "Auto",
+	"default_range_auto_hint": "3 days on phones, everything on wider screens",
+	"summary_heading": "in words",
+	"summary_no_data": "No hourly detail available for this day.",
+	"label_sunrise": "Sunrise",
+	"label_sunset": "Sunset",
+	"label_daylight": "Daylight",
+	"label_uv_index": "UV index",
+	"label_moonrise": "Moonrise",
+	"label_moonset": "Moonset",
+	"label_moon": "Moon",
+	"daylight_hours": "{hours} h {minutes} m",
+	"sunshine_share": "{percent}% sun",
+	"uv_low": "Low",
+	"uv_moderate": "Moderate",
+	"uv_high": "High",
+	"uv_very_high": "Very high",
+	"uv_extreme": "Extreme",
+	"moon_new": "New moon",
+	"moon_waxing_crescent": "Waxing crescent",
+	"moon_first_quarter": "First quarter",
+	"moon_waxing_gibbous": "Waxing gibbous",
+	"moon_full": "Full moon",
+	"moon_waning_gibbous": "Waning gibbous",
+	"moon_last_quarter": "Last quarter",
+	"moon_waning_crescent": "Waning crescent",
+	"cond_clear": "clear",
+	"cond_fair": "partly cloudy",
+	"cond_cloudy": "overcast",
+	"cond_fog": "foggy",
+	"cond_drizzle": "drizzly",
+	"cond_rain": "wet",
+	"cond_snow": "snowy",
+	"cond_thunder": "stormy",
+	"period_overnight": "overnight",
+	"period_morning": "in the morning",
+	"period_afternoon": "in the afternoon",
+	"period_evening": "in the evening",
+	"footer_tagline": "Fast, no-nonsense weather forecasts built on open data.",
+	"footer_data_by": "Weather data by",
+	"footer_forecasts": "Forecasts",
+	"footer_popular": "Popular locations",
+	"footer_about_section": "About",
+	"model_weather": "Weather model",
+	"model_ensemble": "Ensemble model",
+	"sky_all_1": "{condition} all day.",
+	"sky_all_2": "A {condition} day from start to finish.",
+	"sky_all_3": "It stays {condition} throughout.",
+	"sky_two_1": "{c1} {p1}, turning {c2} {p2}.",
+	"sky_two_2": "The day opens {c1} {p1} before turning {c2} {p2}.",
+	"sky_two_3": "Expect {c1} skies {p1}, then {c2} {p2}.",
+	"sky_three_1": "{c1} {p1}, turning {c2} {p2}, then {c3} {p3}.",
+	"sky_three_2": "It starts {c1} {p1}, becomes {c2} {p2} and ends up {c3} {p3}.",
+	"sky_three_3": "From {c1} skies {p1} to {c2} {p2}, before settling {c3} {p3}.",
+	"temp_1": "Highs near {high}, dropping to {low} overnight.",
+	"temp_2": "Temperatures climb to {high} and fall back to {low} after dark.",
+	"temp_3": "Between {low} and {high} through the day.",
+	"temp_feels_1": "Highs near {high}, down to {low} overnight, though it feels closer to {feels}.",
+	"temp_feels_2": "Up to {high} on the thermometer - closer to {feels} in the air - before easing to {low}.",
+	"temp_feels_3": "It reaches {high} but feels more like {feels}, cooling to {low} later.",
+	"precip_window_1": "Around {amount} of precipitation, most of it {when}.",
+	"precip_window_2": "Expect about {amount}, concentrated {when}.",
+	"precip_window_3": "The wettest stretch is {when}, adding up to roughly {amount}.",
+	"precip_spread_1": "Around {amount} of precipitation spread across the day.",
+	"precip_spread_2": "Roughly {amount} falls in bursts through the day.",
+	"precip_spread_3": "Showers come and go, totalling about {amount}.",
+	"precip_chance_1": "Mostly dry, with up to a {percent}% chance of catching a shower.",
+	"precip_chance_2": "Little rain expected, though there is a {percent}% chance of a passing shower.",
+	"precip_chance_3": "A {percent}% shower risk, but nothing worth an umbrella.",
+	"precip_dry_1": "Staying dry throughout.",
+	"precip_dry_2": "Not a drop expected.",
+	"precip_dry_3": "Dry from start to finish.",
+	"wind_dir_1": "Wind from the {direction} reaching {speed}.",
+	"wind_dir_2": "A breeze out of the {direction} tops out at {speed}.",
+	"wind_dir_3": "The wind sits in the {direction}, peaking near {speed}.",
+	"wind_dir_gusts_1": "Wind from the {direction} reaching {speed}, with gusts to {gust}.",
+	"wind_dir_gusts_2": "Wind out of the {direction} at {speed}, gusting as high as {gust}.",
+	"wind_dir_gusts_3": "Expect {speed} from the {direction}, gusting {gust} at times.",
+	"wind_1": "Wind reaching {speed}.",
+	"wind_2": "The breeze peaks around {speed}.",
+	"wind_3": "Air moving at up to {speed}.",
+	"wind_gusts_1": "Wind reaching {speed}, with gusts to {gust}.",
+	"wind_gusts_2": "Up to {speed}, with gusts punching through at {gust}.",
+	"wind_gusts_3": "A gusty day: {speed} sustained, {gust} at the peaks.",
+	"calm_1": "Barely a breath of wind.",
+	"calm_2": "The air stays almost still.",
+	"calm_3": "Next to no wind all day.",
+	"uv_1": "UV peaks at {value} ({label}), so cover up around midday.",
+	"uv_2": "The sun bites around noon: UV {value}, {label}.",
+	"uv_3": "Worth some shade in the middle of the day - UV reaches {value} ({label}).",
+	"legal_about": "About",
+	"legal_imprint": "Imprint",
+	"legal_privacy": "Privacy",
+	"legal_terms": "Terms",
+	"legal_nav": "Legal",
+	"city_weather": "{city} weather",
+	"var_temperature": "Temperature",
+	"var_temperature_short": "Temp",
+	"var_icons": "Weather icons",
+	"var_icons_short": "Icons",
+	"var_apparent": "Apparent Temp",
+	"var_apparent_short": "Feels",
+	"var_dew_point": "Dew Point",
+	"var_dew_point_short": "Dew",
+	"var_cloud": "Cloud Cover",
+	"var_cloud_short": "Cloud",
+	"var_cloud_low": "Cloud Cover Low",
+	"var_cloud_low_short": "Low",
+	"var_cloud_mid": "Cloud Cover Mid",
+	"var_cloud_mid_short": "Mid",
+	"var_cloud_high": "Cloud Cover High",
+	"var_cloud_high_short": "High",
+	"var_precipitation": "Precipitation",
+	"var_precipitation_short": "Precip",
+	"var_pop": "Precip. Probability",
+	"var_pop_short": "PoP",
+	"var_rain": "Rain",
+	"var_rain_short": "Rain",
+	"var_showers": "Showers",
+	"var_showers_short": "Shwr",
+	"var_snowfall": "Snowfall",
+	"var_snowfall_short": "Snow",
+	"var_wind": "Wind Speed",
+	"var_wind_short": "Wind",
+	"var_wind_dir": "Wind direction",
+	"var_wind_dir_short": "Dir",
+	"var_gusts": "Wind Gusts",
+	"var_gusts_short": "Gusts",
+	"var_humidity": "Humidity",
+	"var_humidity_short": "RH",
+	"var_pressure": "Pressure (MSL)",
+	"var_pressure_short": "MSLP",
+	"var_surface_pressure": "Surface Pressure",
+	"var_surface_pressure_short": "Psfc",
+	"var_uv": "UV Index",
+	"var_uv_short": "UV",
+	"var_visibility": "Visibility",
+	"var_visibility_short": "Vis",
+	"var_cape": "CAPE",
+	"var_cape_short": "CAPE",
+	"var_time": "Time",
+	"no_data_title": "No forecast data for this model here",
+	"no_data_body": "The selected weather model doesn't cover {location} - regional models only provide data inside their own area.",
+	"no_data_try_city": "Change location to {city}",
+	"no_data_best_match": "Switch to Best match",
+	"model_archive": "Reanalysis",
+	"model_seasonal": "Seasonal model",
+	"nearby_cities_title": "Nearby cities",
+	"nearby_cities_subtitle": "Highs and lows for the selected day",
+	"supporter_dialog_title": "Drizz.li Supporter",
+	"supporter_dialog_desc": "Paste the access key from your supporter email to unlock the extras.",
+	"supporter_extras_active": "Supporter extras are active",
+	"supporter_lifetime": "Lifetime access",
+	"supporter_active_until": "Active until {date}",
+	"supporter_access_key": "Access key",
+	"supporter_key_invalid": "That key is not valid or has expired.",
+	"supporter_server_unreachable": "Couldn't reach the server. Check your connection and try again.",
+	"supporter_verifying": "Verifying…",
+	"supporter_unlock_button": "Unlock",
+	"supporter_remove_key": "Remove key from this device",
+	"supporter_no_key_yet": "No key yet?",
+	"supporter_support_from": "Support the project from {price}",
+	"supporter_checking": "Checking your subscription…",
+	"supporter_gate_title": "{feature} is a supporter extra",
+	"supporter_gate_body": "Drizz.li is free and open source. Chip in from {price} to keep it running - as a thank-you, supporters unlock the extras.",
+	"supporter_become": "Become a supporter",
+	"supporter_have_key": "I have a key",
+	"supporter_key_expired": "Your saved key is no longer valid or has expired.",
+	"supporter_enter_key": "Enter your access key.",
+	"supporter_perk_historical": "Historical weather & climate-normal comparisons",
+	"supporter_perk_seasonal": "Seasonal outlook: months ahead vs the climate normal",
+	"supporter_perk_future": "New supporter extras as they land",
+	"action_close": "Close",
+	"action_done": "Done",
+	"action_try_again": "Try again",
+	"action_reset_defaults": "Reset to defaults",
+	"customize_meteograms": "Customize meteograms",
+	"customizer_intro": "Drag variables between charts to build your own layout.",
+	"customizer_chart_n": "Chart {number}",
+	"customizer_delete_chart": "Delete chart {number}",
+	"customizer_add_chart": "+ Add chart",
+	"customizer_available": "Available variables",
+	"customizer_drag": "Drag {variable}",
+	"customizer_remove": "Remove {variable}",
+	"customizer_drop_here": "Drop variables here",
+	"customizer_all_in_use": "All variables are in use",
+	"variables_aria": "Variable selection",
+	"variables_close": "Close variable selection",
+	"variables_table_section": "Hourly table",
+	"variables_move_up": "Move {variable} up",
+	"variables_move_down": "Move {variable} down",
+	"variables_charts_hint_before": "Meteogram variables are configured with the",
+	"variables_charts_hint_after": "button above the charts.",
+	"table_customize": "Customize variables",
+	"table_interval_aria": "Hourly interval",
+	"table_now": "Now",
+	"interval_toggle": "Toggle between 1-hour and 3-hour intervals",
+	"charts_loading": "Loading charts...",
+	"chart_download": "Download meteogram as PNG image",
+	"chart_credit_viz": "visualisation by",
+	"chart_toggle_series": "Toggle {series}",
+	"legend_show": "Show legend",
+	"meteograms_none_before": "No meteograms configured,",
+	"meteograms_none_action": "add some variables",
+	"meteograms_none_historical": "No meteograms configured. Add variables from the 7-day forecast page.",
+	"search_searching": "Searching...",
+	"search_favorites": "Favorites",
+	"search_recent": "Recent",
+	"search_hint": "Start typing to search or use GPS to detect your position",
+	"search_no_results": "No locations found",
+	"search_remove_recent": "Remove {location} from recent locations",
+	"search_remove_recent_short": "Remove from recent",
+	"search_aria": "Search location",
+	"search_gps": "Use GPS location",
+	"model_automatic_selection": "Automatic selection",
+	"model_selector_aria": "{label} selection",
+	"compare_models_heading": "Models",
+	"compare_variables_heading": "Hourly Weather Variables",
+	"compare_standard_preset": "Standard comparison",
+	"compare_weather_conditions": "Weather conditions & cloud cover",
+	"compare_wind_direction_height": "Wind direction at {height} m",
+	"compare_standard_preset_description": "A balanced starting point for comparing forecast models.",
+	"compare_preset_active": "Active",
+	"compare_custom_selection": "Custom · {count} selected",
+	"compare_customize_variables": "Customize variables",
+	"compare_restore_defaults": "Restore defaults",
+	"compare_variables_pending": "Variable selection changed",
+	"compare_selected_models": "Selected models",
+	"compare_selection_pending": "Selection changed",
+	"compare_apply_selection": "Apply & reload charts",
+	"compare_discard_changes": "Discard changes",
+	"compare_customize_models": "Customize models",
+	"compare_edit_models": "Edit models",
+	"compare_edit_variables": "Edit variables",
+	"compare_edit_models_description": "Search models or select complete provider families.",
+	"compare_edit_variables_description": "Search variables or select complete thematic groups.",
+	"compare_search_models": "Search models",
+	"compare_search_variables": "Search variables",
+	"compare_show_model_names": "Show model names",
+	"compare_hide_model_names": "Hide model names",
+	"compare_only_selected": "Only selected",
+	"compare_select_group": "Select all",
+	"compare_clear_group": "Clear all",
+	"compare_no_matching_options": "No matching options.",
+	"compare_no_models_selected": "No models selected.",
+	"compare_remove_model": "Remove {model}",
+	"compare_timeline_title": "Model Comparison Timeline",
+	"compare_model_label": "Model",
+	"page_compare_title": "Weather model comparison",
+	"page_compare_description": "Compare hourly forecasts from multiple weather models for any location.",
+	"compare_direction_subtitle": "Direction spread across {count} models · no mean",
+	"compare_scalar_subtitle": "Across {count} models · dashed = model mean",
+	"compare_precipitation_subtitle": "Across {count} models · lower strip = precipitation agreement",
+	"compare_precipitation_agreement": "Agreement",
+	"compare_precipitation_agreement_tooltip": "{wet}/{available} wet · median {median} {unit} · range {min}–{max} {unit}",
+	"compare_model_mean": "Model mean",
+	"compare_showing_previous": "The previous successful comparison remains visible.",
+	"compare_empty_selection": "Select at least one model and one weather variable to build a comparison.",
+	"compare_no_data": "None of the selected models provides usable data for this location and selection.",
+	"compare_weather_codes_only": "Weather conditions and cloud cover are shown in the model timeline below. Select another variable to add a chart.",
+	"compare_model_colors": "Model colors",
+	"compare_group_temperature": "Temperature & humidity",
+	"compare_group_precipitation": "Precipitation & conditions",
+	"compare_group_clouds": "Pressure & clouds",
+	"compare_group_wind": "Wind & atmosphere",
+	"compare_group_upper_air": "Upper-air temperature",
+	"compare_many_models_warning": "{count} models are selected. The comparison may be slower and individual colors harder to distinguish.",
+	"compare_timeline_hint": "Conditions by model; pictogram backgrounds show total cloud cover",
+	"compare_timeline_scroll_aria": "Scrollable model weather timeline",
+	"compare_timeline_caption": "Hourly weather conditions by forecast model",
+	"ensemble_trimmed": "This model's ensemble only reaches about {days} days ahead, the spread is trimmed to its available range.",
+	"seasonal_explainer_before": "A seasonal forecast shows how a whole month is likely to",
+	"seasonal_explainer_strong": "depart from its climate normal",
+	"seasonal_explainer_after": "- not the weather on any given day. Read the monthly trend and the ensemble agreement, not the daily wiggles.",
+	"seasonal_runs_to": "This outlook runs to {date}.",
+	"seasonal_range_aria": "Outlook range",
+	"seasonal_no_normal": "no normal for this month",
+	"normals_loading": "normal loading…",
+	"normals_loading_period": "1991–2020 normal loading…",
+	"normal_band_legend": "normal band = 1991–2020 mean",
+	"anomaly_vs_normal": "{value} vs normal",
+	"stat_avg_temperature": "Average temperature",
+	"stat_mean_temperature": "Mean temperature",
+	"stat_total_precipitation": "Total precipitation",
+	"stat_warmest_day": "Warmest day",
+	"stat_coldest_day": "Coldest day",
+	"historical_daily_heading": "Daily",
+	"historical_daily_hint": "– select a day for hourly detail",
+	"historical_full_range": "– full range",
+	"historical_from": "From",
+	"historical_to": "To",
+	"historical_quick_ranges": "Quick ranges",
+	"historical_last_days": "{days} days",
+	"historical_month_last_year": "Month, last year",
+	"label_day": "day",
+	"label_night": "night",
+	"daycards_past": "Past 3 days",
+	"daycards_load_15": "Load 15 days",
+	"error_technical_details": "Technical details",
+	"err_network_title": "Couldn't reach the weather service",
+	"err_network_hint": "Check your internet connection and try again.",
+	"err_nodata_title": "No data for this location with the selected model",
+	"err_nodata_hint": "Regional weather models only cover their own area - \"Best match\" picks a suitable model automatically.",
+	"err_rejected_title": "The weather service rejected the request",
+	"err_rejected_hint": "Try different settings, or switch the model back to \"Best match\".",
+	"err_generic_title": "Loading the weather data failed",
+	"err_generic_hint": "Try again in a moment. If it keeps happening, switch the model to \"Best match\".",
+	"maps_iframe_title": "Open-Meteo interactive map",
+	"page_maps_title": "Weather map",
+	"page_week_title": "Weather",
+	"search_favorite_add": "Add to favorites",
+	"search_favorite_remove": "Remove from favorites",
+	"supporter_price_per_month": "{amount} / month",
+	"model_best_match_hint": "Automatically picks the best model for this location",
+	"model_updated": "updated {cadence}",
+	"cadence_every_hour": "every hour",
+	"cadence_every_hours": "every {hours} h",
+	"cadence_daily": "daily",
+	"cadence_monthly": "monthly",
+	"cadence_varies": "varies",
+	"model_group_automatic": "Automatic",
+	"model_group_reanalysis": "ECMWF reanalysis",
+	"model_group_regional_reanalysis": "Regional reanalysis"
+}

messages/es.json

@@ -0,0 +1,389 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"nav_week": "Pronóstico de 7 días",
+	"nav_compare": "Comparación de modelos",
+	"nav_14day": "Pronóstico de 14 días",
+	"nav_seasonal": "Estacional",
+	"nav_historical": "Histórico",
+	"nav_maps": "Mapas",
+	"nav_collapse": "Contraer",
+	"nav_expand_sidebar": "Expandir barra lateral",
+	"nav_collapse_sidebar": "Contraer barra lateral",
+	"nav_home": "Inicio de Drizzli",
+	"nav_toggle_menu": "Alternar menú",
+	"search_placeholder": "Buscar ubicación…",
+	"settings_title": "Ajustes",
+	"units_title": "Unidades",
+	"units_aria": "Elegir unidades de medida",
+	"unit_temperature": "Temperatura",
+	"unit_wind_speed": "Velocidad del viento",
+	"unit_precipitation": "Precipitación",
+	"theme_label": "Tema",
+	"theme_system": "Sistema",
+	"theme_light": "Claro",
+	"theme_dark": "Oscuro",
+	"theme_follow_system": "Tema: seguir al sistema",
+	"theme_light_title": "Tema: claro",
+	"theme_dark_title": "Tema: oscuro",
+	"language_label": "Idioma",
+	"supporter_active": "Extras de colaborador activos",
+	"supporter_support": "Apoya Drizz.li",
+	"supporter_manage_key": "Gestiona tu clave de acceso",
+	"supporter_unlock": "Desbloquea los extras de colaborador",
+	"supporter_badge": "Colaborador",
+	"strip_past_label": "antes",
+	"strip_past_aria": "Cargar los últimos 3 días",
+	"strip_days_label": "días",
+	"strip_extend_aria": "Ver el pronóstico completo de 15 días",
+	"strip_history_label": "archivo",
+	"strip_history_aria": "Abrir el archivo meteorológico",
+	"strip_history_title": "Histórico: cualquier fecha desde 1940",
+	"strip_seasonal_label": "estacional",
+	"strip_seasonal_aria": "Abrir la previsión estacional",
+	"strip_seasonal_title": "Previsión estacional: tendencias de los próximos meses",
+	"day_today": "Hoy",
+	"day_tomorrow": "Mañana",
+	"day_yesterday": "Ayer",
+	"page_week_subtitle": "pronóstico de 7 días",
+	"page_compare_subtitle": "comparación de modelos",
+	"page_14day_subtitle": "pronóstico de conjunto a 14 días",
+	"page_seasonal_subtitle": "previsión estacional",
+	"page_historical_subtitle": "clima histórico",
+	"hourly_heading": "por horas",
+	"hourly_variables": "Variables",
+	"meteograms_heading": "Meteogramas",
+	"meteograms_customize": "Personalizar",
+	"meteograms_zoom_hint": "arrastra o",
+	"meteograms_zoom_hint_end": "+ desplazar para ampliar",
+	"range_today": "Hoy",
+	"range_selected_day": "Día seleccionado",
+	"range_3_days": "3 días",
+	"range_5_days": "5 días",
+	"range_all": "Todo",
+	"range_group_aria": "Rango temporal del gráfico",
+	"reset_zoom": "Restablecer zoom",
+	"default_range_title": "Rango temporal predeterminado",
+	"default_range_auto": "Auto",
+	"default_range_auto_hint": "3 días en el móvil, todo en pantallas anchas",
+	"summary_heading": "en palabras",
+	"summary_no_data": "No hay datos horarios para este día.",
+	"label_sunrise": "Amanecer",
+	"label_sunset": "Atardecer",
+	"label_daylight": "Luz diurna",
+	"label_uv_index": "Índice UV",
+	"label_moonrise": "Salida de la luna",
+	"label_moonset": "Puesta de la luna",
+	"label_moon": "Luna",
+	"daylight_hours": "{hours} h {minutes} min",
+	"sunshine_share": "{percent}% de sol",
+	"uv_low": "Bajo",
+	"uv_moderate": "Moderado",
+	"uv_high": "Alto",
+	"uv_very_high": "Muy alto",
+	"uv_extreme": "Extremo",
+	"moon_new": "Luna nueva",
+	"moon_waxing_crescent": "Luna creciente",
+	"moon_first_quarter": "Cuarto creciente",
+	"moon_waxing_gibbous": "Gibosa creciente",
+	"moon_full": "Luna llena",
+	"moon_waning_gibbous": "Gibosa menguante",
+	"moon_last_quarter": "Cuarto menguante",
+	"moon_waning_crescent": "Luna menguante",
+	"cond_clear": "despejado",
+	"cond_fair": "parcialmente nublado",
+	"cond_cloudy": "nublado",
+	"cond_fog": "con niebla",
+	"cond_drizzle": "con llovizna",
+	"cond_rain": "lluvioso",
+	"cond_snow": "con nieve",
+	"cond_thunder": "tormentoso",
+	"period_overnight": "por la noche",
+	"period_morning": "por la mañana",
+	"period_afternoon": "por la tarde",
+	"period_evening": "al anochecer",
+	"footer_tagline": "Pronósticos rápidos y directos basados en datos abiertos.",
+	"footer_data_by": "Datos meteorológicos de",
+	"footer_forecasts": "Pronósticos",
+	"footer_popular": "Ubicaciones populares",
+	"footer_about_section": "Acerca de",
+	"model_weather": "Modelo meteorológico",
+	"model_ensemble": "Modelo de conjunto",
+	"sky_all_1": "{condition} todo el día.",
+	"sky_all_2": "Un día {condition} de principio a fin.",
+	"sky_all_3": "Se mantiene {condition} durante toda la jornada.",
+	"sky_two_1": "{c1} {p1} y {c2} {p2}.",
+	"sky_two_2": "La jornada empieza {c1} {p1} antes de volverse {c2} {p2}.",
+	"sky_two_3": "Se espera cielo {c1} {p1} y {c2} {p2}.",
+	"sky_three_1": "{c1} {p1}, {c2} {p2} y {c3} {p3}.",
+	"sky_three_2": "Empieza {c1} {p1}, se vuelve {c2} {p2} y acaba {c3} {p3}.",
+	"sky_three_3": "De cielo {c1} {p1} a {c2} {p2}, para quedarse {c3} {p3}.",
+	"temp_1": "Máximas de {high} y mínimas de {low} por la noche.",
+	"temp_2": "Las temperaturas suben hasta {high} y bajan a {low} tras el anochecer.",
+	"temp_3": "Entre {low} y {high} a lo largo del día.",
+	"temp_feels_1": "Máximas de {high} y mínimas de {low}, aunque la sensación será de {feels}.",
+	"temp_feels_2": "Hasta {high} en el termómetro, aunque se sentirán {feels}, antes de bajar a {low}.",
+	"temp_feels_3": "Alcanza {high} pero se sentirá como {feels}, con descenso a {low} más tarde.",
+	"precip_window_1": "Unos {amount} de precipitación, sobre todo {when}.",
+	"precip_window_2": "Se esperan unos {amount}, concentrados {when}.",
+	"precip_window_3": "El tramo más húmedo será {when}, con un total aproximado de {amount}.",
+	"precip_spread_1": "Unos {amount} de precipitación repartidos a lo largo del día.",
+	"precip_spread_2": "Aproximadamente {amount} caen a intervalos durante el día.",
+	"precip_spread_3": "Chubascos intermitentes que suman unos {amount}.",
+	"precip_chance_1": "Mayormente seco, con hasta un {percent}% de probabilidad de chubascos.",
+	"precip_chance_2": "Apenas se espera lluvia, aunque hay un {percent}% de probabilidad de un chubasco pasajero.",
+	"precip_chance_3": "Un {percent}% de riesgo de chubascos, pero nada que exija paraguas.",
+	"precip_dry_1": "Se mantendrá seco todo el día.",
+	"precip_dry_2": "No se espera ni una gota.",
+	"precip_dry_3": "Seco de principio a fin.",
+	"wind_dir_1": "Viento del {direction} de hasta {speed}.",
+	"wind_dir_2": "La brisa del {direction} alcanza los {speed}.",
+	"wind_dir_3": "El viento sopla del {direction}, con picos cercanos a {speed}.",
+	"wind_dir_gusts_1": "Viento del {direction} de hasta {speed}, con rachas de {gust}.",
+	"wind_dir_gusts_2": "Un viento del {direction} de {speed} con rachas de hasta {gust}.",
+	"wind_dir_gusts_3": "Se esperan {speed} del {direction}, con rachas puntuales de {gust}.",
+	"wind_1": "Viento de hasta {speed}.",
+	"wind_2": "La brisa alcanza unos {speed}.",
+	"wind_3": "Aire en movimiento de hasta {speed}.",
+	"wind_gusts_1": "Viento de hasta {speed}, con rachas de {gust}.",
+	"wind_gusts_2": "Hasta {speed}, con rachas que llegan a {gust}.",
+	"wind_gusts_3": "Un día racheado: {speed} sostenidos y {gust} en los picos.",
+	"calm_1": "Apenas hay viento.",
+	"calm_2": "El aire se mantiene casi en calma.",
+	"calm_3": "Prácticamente sin viento en todo el día.",
+	"uv_1": "El índice UV llega a {value} ({label}), así que protégete al mediodía.",
+	"uv_2": "El sol aprieta al mediodía: UV {value}, {label}.",
+	"uv_3": "Conviene buscar sombra al mediodía: el UV alcanza {value} ({label}).",
+	"legal_about": "Acerca de",
+	"legal_imprint": "Aviso legal",
+	"legal_privacy": "Privacidad",
+	"legal_terms": "Condiciones",
+	"legal_nav": "Legal",
+	"city_weather": "El tiempo en {city}",
+	"var_temperature": "Temperatura",
+	"var_temperature_short": "Temp",
+	"var_icons": "Iconos",
+	"var_icons_short": "Iconos",
+	"var_apparent": "Sensación térmica",
+	"var_apparent_short": "Sensación",
+	"var_dew_point": "Punto de rocío",
+	"var_dew_point_short": "Rocío",
+	"var_cloud": "Nubosidad",
+	"var_cloud_short": "Nubes",
+	"var_cloud_low": "Nubosidad baja",
+	"var_cloud_low_short": "Baja",
+	"var_cloud_mid": "Nubosidad media",
+	"var_cloud_mid_short": "Media",
+	"var_cloud_high": "Nubosidad alta",
+	"var_cloud_high_short": "Alta",
+	"var_precipitation": "Precipitación",
+	"var_precipitation_short": "Precip.",
+	"var_pop": "Prob. de precipitación",
+	"var_pop_short": "Prob.",
+	"var_rain": "Lluvia",
+	"var_rain_short": "Lluvia",
+	"var_showers": "Chubascos",
+	"var_showers_short": "Chub.",
+	"var_snowfall": "Nevadas",
+	"var_snowfall_short": "Nieve",
+	"var_wind": "Velocidad del viento",
+	"var_wind_short": "Viento",
+	"var_wind_dir": "Dirección del viento",
+	"var_wind_dir_short": "Dir.",
+	"var_gusts": "Rachas de viento",
+	"var_gusts_short": "Rachas",
+	"var_humidity": "Humedad",
+	"var_humidity_short": "HR",
+	"var_pressure": "Presión (MSL)",
+	"var_pressure_short": "MSLP",
+	"var_surface_pressure": "Presión en superficie",
+	"var_surface_pressure_short": "Psfc",
+	"var_uv": "Índice UV",
+	"var_uv_short": "UV",
+	"var_visibility": "Visibilidad",
+	"var_visibility_short": "Vis.",
+	"var_cape": "CAPE",
+	"var_cape_short": "CAPE",
+	"var_time": "Hora",
+	"no_data_title": "Este modelo no tiene datos aquí",
+	"no_data_body": "El modelo seleccionado no cubre {location}: los modelos regionales solo ofrecen datos dentro de su propia área.",
+	"no_data_try_city": "Cambiar la ubicación a {city}",
+	"no_data_best_match": "Cambiar a «Best match»",
+	"model_archive": "Reanálisis",
+	"model_seasonal": "Modelo estacional",
+	"nearby_cities_title": "Ciudades cercanas",
+	"nearby_cities_subtitle": "Máximas y mínimas del día seleccionado",
+	"supporter_dialog_title": "Colaborador de Drizz.li",
+	"supporter_dialog_desc": "Pega la clave de acceso de tu correo de colaborador para desbloquear los extras.",
+	"supporter_extras_active": "Los extras de colaborador están activos",
+	"supporter_lifetime": "Acceso de por vida",
+	"supporter_active_until": "Activo hasta el {date}",
+	"supporter_access_key": "Clave de acceso",
+	"supporter_key_invalid": "Esa clave no es válida o ha caducado.",
+	"supporter_server_unreachable": "No se pudo conectar con el servidor. Comprueba tu conexión e inténtalo de nuevo.",
+	"supporter_verifying": "Verificando…",
+	"supporter_unlock_button": "Desbloquear",
+	"supporter_remove_key": "Quitar la clave de este dispositivo",
+	"supporter_no_key_yet": "¿Aún no tienes clave?",
+	"supporter_support_from": "Apoya el proyecto desde {price}",
+	"supporter_checking": "Comprobando tu suscripción…",
+	"supporter_gate_title": "{feature} es un extra para colaboradores",
+	"supporter_gate_body": "Drizz.li es gratuito y de código abierto. Aporta desde {price} para mantenerlo en marcha; como agradecimiento, los colaboradores desbloquean los extras.",
+	"supporter_become": "Hazte colaborador",
+	"supporter_have_key": "Ya tengo una clave",
+	"supporter_key_expired": "Tu clave guardada ya no es válida o ha caducado.",
+	"supporter_enter_key": "Introduce tu clave de acceso.",
+	"supporter_perk_historical": "Clima histórico y comparación con las normales climáticas",
+	"supporter_perk_seasonal": "Perspectiva estacional: los próximos meses frente a la normal climática",
+	"supporter_perk_future": "Nuevos extras para colaboradores en cuanto lleguen",
+	"action_close": "Cerrar",
+	"action_done": "Listo",
+	"action_try_again": "Reintentar",
+	"action_reset_defaults": "Restablecer valores por defecto",
+	"customize_meteograms": "Personalizar meteogramas",
+	"customizer_intro": "Arrastra variables entre gráficos para crear tu propio diseño.",
+	"customizer_chart_n": "Gráfico {number}",
+	"customizer_delete_chart": "Eliminar el gráfico {number}",
+	"customizer_add_chart": "+ Añadir gráfico",
+	"customizer_available": "Variables disponibles",
+	"customizer_drag": "Arrastrar {variable}",
+	"customizer_remove": "Quitar {variable}",
+	"customizer_drop_here": "Suelta variables aquí",
+	"customizer_all_in_use": "Todas las variables están en uso",
+	"variables_aria": "Selección de variables",
+	"variables_close": "Cerrar la selección de variables",
+	"variables_table_section": "Tabla horaria",
+	"variables_move_up": "Subir {variable}",
+	"variables_move_down": "Bajar {variable}",
+	"variables_charts_hint_before": "Las variables del meteograma se configuran con el botón",
+	"variables_charts_hint_after": "situado encima de los gráficos.",
+	"table_customize": "Personalizar variables",
+	"table_interval_aria": "Intervalo horario",
+	"table_now": "Ahora",
+	"interval_toggle": "Alternar entre intervalos de 1 y 3 horas",
+	"charts_loading": "Cargando gráficos…",
+	"chart_download": "Descargar el meteograma como imagen PNG",
+	"chart_credit_viz": "visualización de",
+	"chart_toggle_series": "Mostrar u ocultar {series}",
+	"legend_show": "Mostrar leyenda",
+	"meteograms_none_before": "No hay meteogramas configurados,",
+	"meteograms_none_action": "añade algunas variables",
+	"meteograms_none_historical": "No hay meteogramas configurados. Añade variables desde la página de 7 días.",
+	"search_searching": "Buscando…",
+	"search_favorites": "Favoritos",
+	"search_recent": "Recientes",
+	"search_hint": "Empieza a escribir o usa el GPS para detectar tu posición",
+	"search_no_results": "No se encontraron ubicaciones",
+	"search_remove_recent": "Quitar {location} de las ubicaciones recientes",
+	"search_remove_recent_short": "Quitar de recientes",
+	"search_aria": "Buscar ubicación",
+	"search_gps": "Usar la ubicación GPS",
+	"model_automatic_selection": "Selección automática",
+	"model_selector_aria": "Selección de {label}",
+	"compare_models_heading": "Modelos",
+	"compare_variables_heading": "Variables meteorológicas horarias",
+	"compare_standard_preset": "Comparación estándar",
+	"compare_weather_conditions": "Condiciones y nubosidad",
+	"compare_wind_direction_height": "Dirección del viento a {height} m",
+	"compare_standard_preset_description": "Un punto de partida equilibrado para comparar modelos de previsión.",
+	"compare_preset_active": "Activa",
+	"compare_custom_selection": "Personalizada · {count} seleccionadas",
+	"compare_customize_variables": "Personalizar variables",
+	"compare_restore_defaults": "Restablecer selección estándar",
+	"compare_variables_pending": "Selección de variables modificada",
+	"compare_selected_models": "Modelos seleccionados",
+	"compare_selection_pending": "Selección modificada",
+	"compare_apply_selection": "Aplicar y recargar gráficos",
+	"compare_discard_changes": "Descartar cambios",
+	"compare_customize_models": "Personalizar modelos",
+	"compare_edit_models": "Editar modelos",
+	"compare_edit_variables": "Editar variables",
+	"compare_edit_models_description": "Busca modelos o selecciona familias completas de proveedores.",
+	"compare_edit_variables_description": "Busca variables o selecciona grupos temáticos completos.",
+	"compare_search_models": "Buscar modelos",
+	"compare_search_variables": "Buscar variables",
+	"compare_show_model_names": "Mostrar nombres de modelos",
+	"compare_hide_model_names": "Ocultar nombres de modelos",
+	"compare_only_selected": "Solo seleccionados",
+	"compare_select_group": "Seleccionar todo",
+	"compare_clear_group": "Deseleccionar todo",
+	"compare_no_matching_options": "No hay opciones coincidentes.",
+	"compare_no_models_selected": "No hay modelos seleccionados.",
+	"compare_remove_model": "Quitar {model}",
+	"compare_timeline_title": "Cronología de comparación de modelos",
+	"compare_model_label": "Modelo",
+	"page_compare_title": "Comparación de modelos meteorológicos",
+	"page_compare_description": "Compara previsiones horarias de varios modelos meteorológicos para cualquier lugar.",
+	"compare_direction_subtitle": "Dispersión de dirección entre {count} modelos · sin media",
+	"compare_scalar_subtitle": "Entre {count} modelos · discontinuo = media de modelos",
+	"compare_precipitation_subtitle": "Entre {count} modelos · franja inferior = concordancia de precipitación",
+	"compare_precipitation_agreement": "Concordancia",
+	"compare_precipitation_agreement_tooltip": "{wet}/{available} con precipitación · mediana {median} {unit} · rango {min}–{max} {unit}",
+	"compare_model_mean": "Media de modelos",
+	"compare_showing_previous": "La comparación anterior sigue visible.",
+	"compare_empty_selection": "Selecciona al menos un modelo y una variable meteorológica.",
+	"compare_no_data": "Ninguno de los modelos seleccionados ofrece datos útiles para este lugar y selección.",
+	"compare_weather_codes_only": "Las condiciones y la nubosidad aparecen en la cronología inferior. Selecciona otra variable para añadir un gráfico.",
+	"compare_model_colors": "Colores de los modelos",
+	"compare_group_temperature": "Temperatura y humedad",
+	"compare_group_precipitation": "Precipitación y condiciones",
+	"compare_group_clouds": "Presión y nubes",
+	"compare_group_wind": "Viento y atmósfera",
+	"compare_group_upper_air": "Temperatura en altura",
+	"compare_many_models_warning": "Hay {count} modelos seleccionados. La comparación puede ser más lenta y los colores más difíciles de distinguir.",
+	"compare_timeline_hint": "Condiciones por modelo; el fondo de los pictogramas indica la nubosidad total",
+	"compare_timeline_scroll_aria": "Cronología meteorológica desplazable por modelos",
+	"compare_timeline_caption": "Condiciones meteorológicas horarias por modelo de previsión",
+	"ensemble_trimmed": "El ensemble de este modelo solo llega unos {days} días, así que la dispersión se recorta a su rango disponible.",
+	"seasonal_explainer_before": "Una previsión estacional muestra cuánto es probable que todo un mes",
+	"seasonal_explainer_strong": "se desvíe de su normal climática",
+	"seasonal_explainer_after": "- no el tiempo de un día concreto. Fíjate en la tendencia mensual y en el acuerdo del ensemble, no en los vaivenes diarios.",
+	"seasonal_runs_to": "Esta perspectiva llega hasta el {date}.",
+	"seasonal_range_aria": "Periodo de la perspectiva",
+	"seasonal_no_normal": "sin normal para este mes",
+	"normals_loading": "cargando la normal…",
+	"normals_loading_period": "cargando la normal 1991–2020…",
+	"normal_band_legend": "banda normal = media 1991–2020",
+	"anomaly_vs_normal": "{value} respecto a la normal",
+	"stat_avg_temperature": "Temperatura media",
+	"stat_mean_temperature": "Temperatura media",
+	"stat_total_precipitation": "Precipitación total",
+	"stat_warmest_day": "Día más cálido",
+	"stat_coldest_day": "Día más frío",
+	"historical_daily_heading": "Diario",
+	"historical_daily_hint": "– selecciona un día para el detalle horario",
+	"historical_full_range": "– rango completo",
+	"historical_from": "Desde",
+	"historical_to": "Hasta",
+	"historical_quick_ranges": "Rangos rápidos",
+	"historical_last_days": "{days} días",
+	"historical_month_last_year": "Este mes, el año pasado",
+	"label_day": "día",
+	"label_night": "noche",
+	"daycards_past": "3 días pasados",
+	"daycards_load_15": "Cargar 15 días",
+	"error_technical_details": "Detalles técnicos",
+	"err_network_title": "No se pudo conectar con el servicio meteorológico",
+	"err_network_hint": "Comprueba tu conexión a internet e inténtalo de nuevo.",
+	"err_nodata_title": "No hay datos para esta ubicación con el modelo seleccionado",
+	"err_nodata_hint": "Los modelos regionales solo cubren su propia área - \"Best match\" elige automáticamente un modelo adecuado.",
+	"err_rejected_title": "El servicio meteorológico rechazó la solicitud",
+	"err_rejected_hint": "Prueba otros ajustes o vuelve al modelo \"Best match\".",
+	"err_generic_title": "No se pudieron cargar los datos meteorológicos",
+	"err_generic_hint": "Vuelve a intentarlo en un momento. Si sigue ocurriendo, cambia el modelo a \"Best match\".",
+	"maps_iframe_title": "Mapa interactivo de Open-Meteo",
+	"page_maps_title": "Mapa meteorológico",
+	"page_week_title": "El tiempo",
+	"search_favorite_add": "Añadir a favoritos",
+	"search_favorite_remove": "Quitar de favoritos",
+	"supporter_price_per_month": "{amount} / mes",
+	"model_best_match_hint": "Elige automáticamente el mejor modelo para esta ubicación",
+	"model_updated": "actualizado {cadence}",
+	"cadence_every_hour": "cada hora",
+	"cadence_every_hours": "cada {hours} h",
+	"cadence_daily": "a diario",
+	"cadence_monthly": "cada mes",
+	"cadence_varies": "variable",
+	"model_group_automatic": "Automático",
+	"model_group_reanalysis": "Reanálisis del ECMWF",
+	"model_group_regional_reanalysis": "Reanálisis regional"
+}

messages/fr.json

@@ -0,0 +1,389 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"nav_week": "Prévisions à 7 jours",
+	"nav_compare": "Comparaison des modèles",
+	"nav_14day": "Prévisions à 14 jours",
+	"nav_seasonal": "Saisonnier",
+	"nav_historical": "Historique",
+	"nav_maps": "Cartes",
+	"nav_collapse": "Réduire",
+	"nav_expand_sidebar": "Déployer la barre latérale",
+	"nav_collapse_sidebar": "Réduire la barre latérale",
+	"nav_home": "Accueil Drizzli",
+	"nav_toggle_menu": "Basculer le menu",
+	"search_placeholder": "Rechercher un lieu…",
+	"settings_title": "Paramètres",
+	"units_title": "Unités",
+	"units_aria": "Choisir les unités de mesure",
+	"unit_temperature": "Température",
+	"unit_wind_speed": "Vitesse du vent",
+	"unit_precipitation": "Précipitations",
+	"theme_label": "Thème",
+	"theme_system": "Système",
+	"theme_light": "Clair",
+	"theme_dark": "Sombre",
+	"theme_follow_system": "Thème : suivre le système",
+	"theme_light_title": "Thème : clair",
+	"theme_dark_title": "Thème : sombre",
+	"language_label": "Langue",
+	"supporter_active": "Bonus contributeur actifs",
+	"supporter_support": "Soutenir Drizz.li",
+	"supporter_manage_key": "Gérer votre clé d'accès",
+	"supporter_unlock": "Débloquer les bonus contributeur",
+	"supporter_badge": "Contributeur",
+	"strip_past_label": "avant",
+	"strip_past_aria": "Charger les 3 derniers jours",
+	"strip_days_label": "jours",
+	"strip_extend_aria": "Afficher les 15 jours complets",
+	"strip_history_label": "archives",
+	"strip_history_aria": "Ouvrir les archives météo",
+	"strip_history_title": "Historique : toute date depuis 1940",
+	"strip_seasonal_label": "saisonnier",
+	"strip_seasonal_aria": "Ouvrir les tendances saisonnières",
+	"strip_seasonal_title": "Tendances saisonnières : les mois à venir",
+	"day_today": "Aujourd'hui",
+	"day_tomorrow": "Demain",
+	"day_yesterday": "Hier",
+	"page_week_subtitle": "prévisions à 7 jours",
+	"page_compare_subtitle": "comparaison des modèles",
+	"page_14day_subtitle": "prévision d'ensemble à 14 jours",
+	"page_seasonal_subtitle": "tendances saisonnières",
+	"page_historical_subtitle": "météo historique",
+	"hourly_heading": "par heure",
+	"hourly_variables": "Variables",
+	"meteograms_heading": "Météogrammes",
+	"meteograms_customize": "Personnaliser",
+	"meteograms_zoom_hint": "glissez ou",
+	"meteograms_zoom_hint_end": "+ défiler pour zoomer",
+	"range_today": "Aujourd'hui",
+	"range_selected_day": "Jour sélectionné",
+	"range_3_days": "3 jours",
+	"range_5_days": "5 jours",
+	"range_all": "Tout",
+	"range_group_aria": "Plage horaire du graphique",
+	"reset_zoom": "Réinitialiser le zoom",
+	"default_range_title": "Plage horaire par défaut",
+	"default_range_auto": "Auto",
+	"default_range_auto_hint": "3 jours sur mobile, tout sur grand écran",
+	"summary_heading": "en résumé",
+	"summary_no_data": "Aucun détail horaire pour ce jour.",
+	"label_sunrise": "Lever du soleil",
+	"label_sunset": "Coucher du soleil",
+	"label_daylight": "Durée du jour",
+	"label_uv_index": "Indice UV",
+	"label_moonrise": "Lever de la lune",
+	"label_moonset": "Coucher de la lune",
+	"label_moon": "Lune",
+	"daylight_hours": "{hours} h {minutes} min",
+	"sunshine_share": "{percent}% de soleil",
+	"uv_low": "Faible",
+	"uv_moderate": "Modéré",
+	"uv_high": "Élevé",
+	"uv_very_high": "Très élevé",
+	"uv_extreme": "Extrême",
+	"moon_new": "Nouvelle lune",
+	"moon_waxing_crescent": "Premier croissant",
+	"moon_first_quarter": "Premier quartier",
+	"moon_waxing_gibbous": "Gibbeuse croissante",
+	"moon_full": "Pleine lune",
+	"moon_waning_gibbous": "Gibbeuse décroissante",
+	"moon_last_quarter": "Dernier quartier",
+	"moon_waning_crescent": "Dernier croissant",
+	"cond_clear": "dégagé",
+	"cond_fair": "partiellement nuageux",
+	"cond_cloudy": "couvert",
+	"cond_fog": "brumeux",
+	"cond_drizzle": "bruineux",
+	"cond_rain": "pluvieux",
+	"cond_snow": "neigeux",
+	"cond_thunder": "orageux",
+	"period_overnight": "la nuit",
+	"period_morning": "le matin",
+	"period_afternoon": "l'après-midi",
+	"period_evening": "en soirée",
+	"footer_tagline": "Des prévisions météo rapides et sans fioritures, basées sur des données ouvertes.",
+	"footer_data_by": "Données météo par",
+	"footer_forecasts": "Prévisions",
+	"footer_popular": "Lieux populaires",
+	"footer_about_section": "À propos",
+	"model_weather": "Modèle météo",
+	"model_ensemble": "Modèle d'ensemble",
+	"sky_all_1": "{condition} toute la journée.",
+	"sky_all_2": "Une journée {condition} du matin au soir.",
+	"sky_all_3": "Le ciel reste {condition} tout du long.",
+	"sky_two_1": "{c1} {p1}, puis {c2} {p2}.",
+	"sky_two_2": "La journée débute {c1} {p1} avant de devenir {c2} {p2}.",
+	"sky_two_3": "Ciel {c1} {p1}, puis {c2} {p2}.",
+	"sky_three_1": "{c1} {p1}, puis {c2} {p2} et enfin {c3} {p3}.",
+	"sky_three_2": "Le ciel est {c1} {p1}, devient {c2} {p2} et finit {c3} {p3}.",
+	"sky_three_3": "D'un ciel {c1} {p1} à {c2} {p2}, avant de rester {c3} {p3}.",
+	"temp_1": "Maximales proches de {high}, minimales de {low} la nuit.",
+	"temp_2": "Les températures montent à {high} et retombent à {low} après la tombée de la nuit.",
+	"temp_3": "Entre {low} et {high} au fil de la journée.",
+	"temp_feels_1": "Maximales proches de {high}, minimales de {low}, mais ressenti plutôt {feels}.",
+	"temp_feels_2": "Jusqu'à {high} au thermomètre, ressenti {feels}, avant de redescendre à {low}.",
+	"temp_feels_3": "Il fera {high} mais on ressentira {feels}, avec {low} plus tard.",
+	"precip_window_1": "Environ {amount} de précipitations, surtout {when}.",
+	"precip_window_2": "Comptez environ {amount}, concentrés {when}.",
+	"precip_window_3": "Le passage le plus humide se situe {when}, pour environ {amount} au total.",
+	"precip_spread_1": "Environ {amount} de précipitations réparties sur la journée.",
+	"precip_spread_2": "Environ {amount} tombent par intermittence au cours de la journée.",
+	"precip_spread_3": "Des averses vont et viennent, pour un total d'environ {amount}.",
+	"precip_chance_1": "Temps plutôt sec, avec jusqu'à {percent}% de risque d'averse.",
+	"precip_chance_2": "Peu de pluie attendue, mais {percent}% de risque d'une averse passagère.",
+	"precip_chance_3": "{percent}% de risque d'averse, rien qui justifie un parapluie.",
+	"precip_dry_1": "Le temps reste sec toute la journée.",
+	"precip_dry_2": "Pas une goutte attendue.",
+	"precip_dry_3": "Sec du début à la fin.",
+	"wind_dir_1": "Vent de secteur {direction} atteignant {speed}.",
+	"wind_dir_2": "Une brise de secteur {direction} culmine à {speed}.",
+	"wind_dir_3": "Le vent s'oriente au secteur {direction}, avec des pointes proches de {speed}.",
+	"wind_dir_gusts_1": "Vent de secteur {direction} atteignant {speed}, avec des rafales à {gust}.",
+	"wind_dir_gusts_2": "Un vent de secteur {direction} de {speed}, avec des rafales jusqu'à {gust}.",
+	"wind_dir_gusts_3": "Attendez-vous à {speed} de secteur {direction}, avec des rafales de {gust} par moments.",
+	"wind_1": "Vent atteignant {speed}.",
+	"wind_2": "La brise culmine autour de {speed}.",
+	"wind_3": "Un vent allant jusqu'à {speed}.",
+	"wind_gusts_1": "Vent atteignant {speed}, avec des rafales à {gust}.",
+	"wind_gusts_2": "Jusqu'à {speed}, avec des rafales atteignant {gust}.",
+	"wind_gusts_3": "Une journée à rafales : {speed} en continu, {gust} en pointe.",
+	"calm_1": "Pratiquement pas de vent.",
+	"calm_2": "L'air reste quasiment immobile.",
+	"calm_3": "Quasiment aucun vent de la journée.",
+	"uv_1": "Indice UV jusqu'à {value} ({label}) : protégez-vous en milieu de journée.",
+	"uv_2": "Le soleil tape à la mi-journée : UV {value}, {label}.",
+	"uv_3": "Mieux vaut chercher l'ombre à midi : l'UV atteint {value} ({label}).",
+	"legal_about": "À propos",
+	"legal_imprint": "Mentions légales",
+	"legal_privacy": "Confidentialité",
+	"legal_terms": "Conditions",
+	"legal_nav": "Informations légales",
+	"city_weather": "Météo à {city}",
+	"var_temperature": "Température",
+	"var_temperature_short": "Temp",
+	"var_icons": "Icônes météo",
+	"var_icons_short": "Icônes",
+	"var_apparent": "Ressenti",
+	"var_apparent_short": "Ressenti",
+	"var_dew_point": "Point de rosée",
+	"var_dew_point_short": "Rosée",
+	"var_cloud": "Nébulosité",
+	"var_cloud_short": "Nuages",
+	"var_cloud_low": "Nébulosité basse",
+	"var_cloud_low_short": "Basse",
+	"var_cloud_mid": "Nébulosité moyenne",
+	"var_cloud_mid_short": "Moyenne",
+	"var_cloud_high": "Nébulosité haute",
+	"var_cloud_high_short": "Haute",
+	"var_precipitation": "Précipitations",
+	"var_precipitation_short": "Précip.",
+	"var_pop": "Probabilité de précip.",
+	"var_pop_short": "Prob.",
+	"var_rain": "Pluie",
+	"var_rain_short": "Pluie",
+	"var_showers": "Averses",
+	"var_showers_short": "Averses",
+	"var_snowfall": "Chutes de neige",
+	"var_snowfall_short": "Neige",
+	"var_wind": "Vitesse du vent",
+	"var_wind_short": "Vent",
+	"var_wind_dir": "Direction du vent",
+	"var_wind_dir_short": "Dir.",
+	"var_gusts": "Rafales",
+	"var_gusts_short": "Rafales",
+	"var_humidity": "Humidité",
+	"var_humidity_short": "HR",
+	"var_pressure": "Pression (MSL)",
+	"var_pressure_short": "MSLP",
+	"var_surface_pressure": "Pression au sol",
+	"var_surface_pressure_short": "Psfc",
+	"var_uv": "Indice UV",
+	"var_uv_short": "UV",
+	"var_visibility": "Visibilité",
+	"var_visibility_short": "Vis.",
+	"var_cape": "CAPE",
+	"var_cape_short": "CAPE",
+	"var_time": "Heure",
+	"no_data_title": "Ce modèle n'a pas de données ici",
+	"no_data_body": "Le modèle sélectionné ne couvre pas {location} : les modèles régionaux ne fournissent des données que dans leur propre zone.",
+	"no_data_try_city": "Changer de lieu pour {city}",
+	"no_data_best_match": "Passer à « Best match »",
+	"model_archive": "Réanalyse",
+	"model_seasonal": "Modèle saisonnier",
+	"nearby_cities_title": "Villes à proximité",
+	"nearby_cities_subtitle": "Maximales et minimales du jour sélectionné",
+	"supporter_dialog_title": "Soutien Drizz.li",
+	"supporter_dialog_desc": "Collez la clé d'accès reçue par e-mail pour débloquer les bonus.",
+	"supporter_extras_active": "Les bonus contributeur sont actifs",
+	"supporter_lifetime": "Accès à vie",
+	"supporter_active_until": "Actif jusqu'au {date}",
+	"supporter_access_key": "Clé d'accès",
+	"supporter_key_invalid": "Cette clé n'est pas valide ou a expiré.",
+	"supporter_server_unreachable": "Serveur injoignable. Vérifiez votre connexion et réessayez.",
+	"supporter_verifying": "Vérification…",
+	"supporter_unlock_button": "Débloquer",
+	"supporter_remove_key": "Supprimer la clé de cet appareil",
+	"supporter_no_key_yet": "Pas encore de clé ?",
+	"supporter_support_from": "Soutenez le projet à partir de {price}",
+	"supporter_checking": "Vérification de votre abonnement…",
+	"supporter_gate_title": "{feature} est un bonus contributeur",
+	"supporter_gate_body": "Drizz.li est gratuit et open source. Contribuez à partir de {price} pour le faire vivre - en remerciement, les contributeurs débloquent les bonus.",
+	"supporter_become": "Devenir contributeur",
+	"supporter_have_key": "J'ai une clé",
+	"supporter_key_expired": "Votre clé enregistrée n'est plus valide ou a expiré.",
+	"supporter_enter_key": "Saisissez votre clé d'accès.",
+	"supporter_perk_historical": "Météo historique et comparaison aux normales climatiques",
+	"supporter_perk_seasonal": "Aperçu saisonnier : les mois à venir face à la normale climatique",
+	"supporter_perk_future": "Les nouveaux bonus dès leur sortie",
+	"action_close": "Fermer",
+	"action_done": "Terminé",
+	"action_try_again": "Réessayer",
+	"action_reset_defaults": "Rétablir les valeurs par défaut",
+	"customize_meteograms": "Personnaliser les météogrammes",
+	"customizer_intro": "Faites glisser les variables d'un graphique à l'autre pour composer votre mise en page.",
+	"customizer_chart_n": "Graphique {number}",
+	"customizer_delete_chart": "Supprimer le graphique {number}",
+	"customizer_add_chart": "+ Ajouter un graphique",
+	"customizer_available": "Variables disponibles",
+	"customizer_drag": "Déplacer {variable}",
+	"customizer_remove": "Retirer {variable}",
+	"customizer_drop_here": "Déposez des variables ici",
+	"customizer_all_in_use": "Toutes les variables sont utilisées",
+	"variables_aria": "Sélection des variables",
+	"variables_close": "Fermer la sélection des variables",
+	"variables_table_section": "Tableau horaire",
+	"variables_move_up": "Déplacer {variable} vers le haut",
+	"variables_move_down": "Déplacer {variable} vers le bas",
+	"variables_charts_hint_before": "Les variables des météogrammes se règlent avec le bouton",
+	"variables_charts_hint_after": "au-dessus des graphiques.",
+	"table_customize": "Personnaliser les variables",
+	"table_interval_aria": "Intervalle horaire",
+	"table_now": "Maintenant",
+	"interval_toggle": "Basculer entre les intervalles de 1 h et 3 h",
+	"charts_loading": "Chargement des graphiques…",
+	"chart_download": "Télécharger le météogramme en PNG",
+	"chart_credit_viz": "visualisation par",
+	"chart_toggle_series": "Afficher ou masquer {series}",
+	"legend_show": "Afficher la légende",
+	"meteograms_none_before": "Aucun météogramme configuré,",
+	"meteograms_none_action": "ajoutez des variables",
+	"meteograms_none_historical": "Aucun météogramme configuré. Ajoutez des variables depuis la page 7 jours.",
+	"search_searching": "Recherche…",
+	"search_favorites": "Favoris",
+	"search_recent": "Récents",
+	"search_hint": "Commencez à taper ou utilisez le GPS pour détecter votre position",
+	"search_no_results": "Aucun lieu trouvé",
+	"search_remove_recent": "Retirer {location} des lieux récents",
+	"search_remove_recent_short": "Retirer des récents",
+	"search_aria": "Rechercher un lieu",
+	"search_gps": "Utiliser la position GPS",
+	"model_automatic_selection": "Sélection automatique",
+	"model_selector_aria": "Sélection : {label}",
+	"compare_models_heading": "Modèles",
+	"compare_variables_heading": "Variables météo horaires",
+	"compare_standard_preset": "Comparaison standard",
+	"compare_weather_conditions": "Conditions & couverture nuageuse",
+	"compare_wind_direction_height": "Direction du vent à {height} m",
+	"compare_standard_preset_description": "Un point de départ équilibré pour comparer les modèles de prévision.",
+	"compare_preset_active": "Active",
+	"compare_custom_selection": "Personnalisée · {count} sélectionnées",
+	"compare_customize_variables": "Personnaliser les variables",
+	"compare_restore_defaults": "Rétablir la sélection standard",
+	"compare_variables_pending": "Sélection des variables modifiée",
+	"compare_selected_models": "Modèles sélectionnés",
+	"compare_selection_pending": "Sélection modifiée",
+	"compare_apply_selection": "Appliquer et recharger les graphiques",
+	"compare_discard_changes": "Annuler les modifications",
+	"compare_customize_models": "Personnaliser les modèles",
+	"compare_edit_models": "Modifier les modèles",
+	"compare_edit_variables": "Modifier les variables",
+	"compare_edit_models_description": "Recherchez des modèles ou sélectionnez des fournisseurs entiers.",
+	"compare_edit_variables_description": "Recherchez des variables ou sélectionnez des groupes thématiques entiers.",
+	"compare_search_models": "Rechercher des modèles",
+	"compare_search_variables": "Rechercher des variables",
+	"compare_show_model_names": "Afficher les noms des modèles",
+	"compare_hide_model_names": "Masquer les noms des modèles",
+	"compare_only_selected": "Sélection uniquement",
+	"compare_select_group": "Tout sélectionner",
+	"compare_clear_group": "Tout désélectionner",
+	"compare_no_matching_options": "Aucune option correspondante.",
+	"compare_no_models_selected": "Aucun modèle sélectionné.",
+	"compare_remove_model": "Supprimer {model}",
+	"compare_timeline_title": "Chronologie de comparaison des modèles",
+	"compare_model_label": "Modèle",
+	"page_compare_title": "Comparaison des modèles météo",
+	"page_compare_description": "Comparez les prévisions horaires de plusieurs modèles météo pour n’importe quel lieu.",
+	"compare_direction_subtitle": "Dispersion des directions sur {count} modèles · sans moyenne",
+	"compare_scalar_subtitle": "Sur {count} modèles · pointillés = moyenne des modèles",
+	"compare_precipitation_subtitle": "Sur {count} modèles · bande inférieure = accord sur les précipitations",
+	"compare_precipitation_agreement": "Accord",
+	"compare_precipitation_agreement_tooltip": "{wet}/{available} avec précipitations · médiane {median} {unit} · plage {min}–{max} {unit}",
+	"compare_model_mean": "Moyenne des modèles",
+	"compare_showing_previous": "La dernière comparaison réussie reste affichée.",
+	"compare_empty_selection": "Sélectionnez au moins un modèle et une variable météo.",
+	"compare_no_data": "Aucun des modèles sélectionnés ne fournit de données exploitables pour ce lieu et cette sélection.",
+	"compare_weather_codes_only": "Les conditions et la couverture nuageuse sont affichées dans la chronologie ci-dessous. Sélectionnez une autre variable pour ajouter un graphique.",
+	"compare_model_colors": "Couleurs des modèles",
+	"compare_group_temperature": "Température et humidité",
+	"compare_group_precipitation": "Précipitations et conditions",
+	"compare_group_clouds": "Pression et nuages",
+	"compare_group_wind": "Vent et atmosphère",
+	"compare_group_upper_air": "Température en altitude",
+	"compare_many_models_warning": "{count} modèles sont sélectionnés. La comparaison peut être plus lente et les couleurs plus difficiles à distinguer.",
+	"compare_timeline_hint": "Conditions par modèle ; le fond des pictogrammes indique la couverture nuageuse totale",
+	"compare_timeline_scroll_aria": "Chronologie météo des modèles à défilement horizontal",
+	"compare_timeline_caption": "Conditions météo horaires par modèle de prévision",
+	"ensemble_trimmed": "L'ensemble de ce modèle ne va qu'à environ {days} jours, la dispersion est donc limitée à sa portée disponible.",
+	"seasonal_explainer_before": "Une prévision saisonnière montre dans quelle mesure un mois entier devrait",
+	"seasonal_explainer_strong": "s'écarter de sa normale climatique",
+	"seasonal_explainer_after": "- et non le temps qu'il fera un jour donné. Lisez la tendance mensuelle et l'accord de l'ensemble, pas les variations quotidiennes.",
+	"seasonal_runs_to": "Cet aperçu va jusqu'au {date}.",
+	"seasonal_range_aria": "Période de l'aperçu",
+	"seasonal_no_normal": "pas de normale pour ce mois",
+	"normals_loading": "chargement de la normale…",
+	"normals_loading_period": "chargement de la normale 1991–2020…",
+	"normal_band_legend": "bande normale = moyenne 1991–2020",
+	"anomaly_vs_normal": "{value} par rapport à la normale",
+	"stat_avg_temperature": "Température moyenne",
+	"stat_mean_temperature": "Température moyenne",
+	"stat_total_precipitation": "Précipitations totales",
+	"stat_warmest_day": "Jour le plus chaud",
+	"stat_coldest_day": "Jour le plus froid",
+	"historical_daily_heading": "Quotidien",
+	"historical_daily_hint": "– sélectionnez un jour pour le détail horaire",
+	"historical_full_range": "– période complète",
+	"historical_from": "Du",
+	"historical_to": "Au",
+	"historical_quick_ranges": "Plages rapides",
+	"historical_last_days": "{days} jours",
+	"historical_month_last_year": "Ce mois, l'an dernier",
+	"label_day": "jour",
+	"label_night": "nuit",
+	"daycards_past": "3 jours passés",
+	"daycards_load_15": "Charger 15 jours",
+	"error_technical_details": "Détails techniques",
+	"err_network_title": "Service météo injoignable",
+	"err_network_hint": "Vérifiez votre connexion internet et réessayez.",
+	"err_nodata_title": "Aucune donnée pour ce lieu avec le modèle sélectionné",
+	"err_nodata_hint": "Les modèles régionaux ne couvrent que leur propre zone - \"Best match\" choisit automatiquement un modèle adapté.",
+	"err_rejected_title": "Le service météo a refusé la requête",
+	"err_rejected_hint": "Essayez d'autres réglages ou revenez au modèle \"Best match\".",
+	"err_generic_title": "Le chargement des données météo a échoué",
+	"err_generic_hint": "Réessayez dans un instant. Si cela persiste, revenez au modèle \"Best match\".",
+	"maps_iframe_title": "Carte interactive Open-Meteo",
+	"page_maps_title": "Carte météo",
+	"page_week_title": "Météo",
+	"search_favorite_add": "Ajouter aux favoris",
+	"search_favorite_remove": "Retirer des favoris",
+	"supporter_price_per_month": "{amount} / mois",
+	"model_best_match_hint": "Choisit automatiquement le meilleur modèle pour ce lieu",
+	"model_updated": "mis à jour {cadence}",
+	"cadence_every_hour": "toutes les heures",
+	"cadence_every_hours": "toutes les {hours} h",
+	"cadence_daily": "chaque jour",
+	"cadence_monthly": "chaque mois",
+	"cadence_varies": "variable",
+	"model_group_automatic": "Automatique",
+	"model_group_reanalysis": "Réanalyse ECMWF",
+	"model_group_regional_reanalysis": "Réanalyse régionale"
+}

messages/it.json

@@ -0,0 +1,389 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"nav_week": "Previsioni a 7 giorni",
+	"nav_compare": "Confronto modelli",
+	"nav_14day": "Previsioni a 14 giorni",
+	"nav_seasonal": "Stagionale",
+	"nav_historical": "Storico",
+	"nav_maps": "Mappe",
+	"nav_collapse": "Comprimi",
+	"nav_expand_sidebar": "Espandi barra laterale",
+	"nav_collapse_sidebar": "Comprimi barra laterale",
+	"nav_home": "Home di Drizzli",
+	"nav_toggle_menu": "Attiva/disattiva menu",
+	"search_placeholder": "Cerca una località…",
+	"settings_title": "Impostazioni",
+	"units_title": "Unità",
+	"units_aria": "Scegli le unità di misura",
+	"unit_temperature": "Temperatura",
+	"unit_wind_speed": "Velocità del vento",
+	"unit_precipitation": "Precipitazioni",
+	"theme_label": "Tema",
+	"theme_system": "Sistema",
+	"theme_light": "Chiaro",
+	"theme_dark": "Scuro",
+	"theme_follow_system": "Tema: segui il sistema",
+	"theme_light_title": "Tema: chiaro",
+	"theme_dark_title": "Tema: scuro",
+	"language_label": "Lingua",
+	"supporter_active": "Extra sostenitore attivi",
+	"supporter_support": "Sostieni Drizz.li",
+	"supporter_manage_key": "Gestisci la tua chiave di accesso",
+	"supporter_unlock": "Sblocca gli extra sostenitore",
+	"supporter_badge": "Sostenitore",
+	"strip_past_label": "prima",
+	"strip_past_aria": "Carica gli ultimi 3 giorni",
+	"strip_days_label": "giorni",
+	"strip_extend_aria": "Mostra le previsioni complete a 15 giorni",
+	"strip_history_label": "archivio",
+	"strip_history_aria": "Apri l'archivio meteo",
+	"strip_history_title": "Storico: qualsiasi data dal 1940",
+	"strip_seasonal_label": "stagionale",
+	"strip_seasonal_aria": "Apri le tendenze stagionali",
+	"strip_seasonal_title": "Tendenze stagionali: i prossimi mesi",
+	"day_today": "Oggi",
+	"day_tomorrow": "Domani",
+	"day_yesterday": "Ieri",
+	"page_week_subtitle": "previsioni a 7 giorni",
+	"page_compare_subtitle": "confronto modelli",
+	"page_14day_subtitle": "previsione d'insieme a 14 giorni",
+	"page_seasonal_subtitle": "tendenze stagionali",
+	"page_historical_subtitle": "meteo storico",
+	"hourly_heading": "orario",
+	"hourly_variables": "Variabili",
+	"meteograms_heading": "Meteogrammi",
+	"meteograms_customize": "Personalizza",
+	"meteograms_zoom_hint": "trascina o",
+	"meteograms_zoom_hint_end": "+ scorri per ingrandire",
+	"range_today": "Oggi",
+	"range_selected_day": "Giorno selezionato",
+	"range_3_days": "3 giorni",
+	"range_5_days": "5 giorni",
+	"range_all": "Tutto",
+	"range_group_aria": "Intervallo temporale del grafico",
+	"reset_zoom": "Reimposta zoom",
+	"default_range_title": "Intervallo temporale predefinito",
+	"default_range_auto": "Auto",
+	"default_range_auto_hint": "3 giorni su cellulare, tutto su schermi ampi",
+	"summary_heading": "in parole",
+	"summary_no_data": "Nessun dato orario per questo giorno.",
+	"label_sunrise": "Alba",
+	"label_sunset": "Tramonto",
+	"label_daylight": "Ore di luce",
+	"label_uv_index": "Indice UV",
+	"label_moonrise": "Sorgere della luna",
+	"label_moonset": "Tramonto della luna",
+	"label_moon": "Luna",
+	"daylight_hours": "{hours} h {minutes} min",
+	"sunshine_share": "{percent}% di sole",
+	"uv_low": "Basso",
+	"uv_moderate": "Moderato",
+	"uv_high": "Alto",
+	"uv_very_high": "Molto alto",
+	"uv_extreme": "Estremo",
+	"moon_new": "Luna nuova",
+	"moon_waxing_crescent": "Luna crescente",
+	"moon_first_quarter": "Primo quarto",
+	"moon_waxing_gibbous": "Gibbosa crescente",
+	"moon_full": "Luna piena",
+	"moon_waning_gibbous": "Gibbosa calante",
+	"moon_last_quarter": "Ultimo quarto",
+	"moon_waning_crescent": "Luna calante",
+	"cond_clear": "sereno",
+	"cond_fair": "parzialmente nuvoloso",
+	"cond_cloudy": "coperto",
+	"cond_fog": "nebbioso",
+	"cond_drizzle": "con pioviggine",
+	"cond_rain": "piovoso",
+	"cond_snow": "nevoso",
+	"cond_thunder": "temporalesco",
+	"period_overnight": "durante la notte",
+	"period_morning": "al mattino",
+	"period_afternoon": "nel pomeriggio",
+	"period_evening": "in serata",
+	"footer_tagline": "Previsioni meteo rapide e senza fronzoli, basate su dati aperti.",
+	"footer_data_by": "Dati meteo da",
+	"footer_forecasts": "Previsioni",
+	"footer_popular": "Località popolari",
+	"footer_about_section": "Informazioni",
+	"model_weather": "Modello meteo",
+	"model_ensemble": "Modello d'insieme",
+	"sky_all_1": "{condition} per tutta la giornata.",
+	"sky_all_2": "Una giornata {condition} dall'inizio alla fine.",
+	"sky_all_3": "Il cielo resta {condition} per tutto il giorno.",
+	"sky_two_1": "{c1} {p1}, poi {c2} {p2}.",
+	"sky_two_2": "La giornata si apre {c1} {p1} prima di diventare {c2} {p2}.",
+	"sky_two_3": "Cielo {c1} {p1} e poi {c2} {p2}.",
+	"sky_three_1": "{c1} {p1}, poi {c2} {p2} e infine {c3} {p3}.",
+	"sky_three_2": "Inizia {c1} {p1}, diventa {c2} {p2} e finisce {c3} {p3}.",
+	"sky_three_3": "Da cielo {c1} {p1} a {c2} {p2}, per poi restare {c3} {p3}.",
+	"temp_1": "Massime intorno a {high} e minime di {low} durante la notte.",
+	"temp_2": "Le temperature salgono fino a {high} e tornano a {low} dopo il tramonto.",
+	"temp_3": "Tra {low} e {high} nel corso della giornata.",
+	"temp_feels_1": "Massime intorno a {high} e minime di {low}, ma con una percezione di {feels}.",
+	"temp_feels_2": "Fino a {high} sul termometro, percepiti {feels}, prima di scendere a {low}.",
+	"temp_feels_3": "Si arriva a {high} ma se ne percepiscono {feels}, con {low} più tardi.",
+	"precip_window_1": "Circa {amount} di precipitazioni, soprattutto {when}.",
+	"precip_window_2": "Sono attesi circa {amount}, concentrati {when}.",
+	"precip_window_3": "Il periodo più piovoso è {when}, per un totale di circa {amount}.",
+	"precip_spread_1": "Circa {amount} di precipitazioni distribuite nell'arco della giornata.",
+	"precip_spread_2": "Circa {amount} cadono a intermittenza durante il giorno.",
+	"precip_spread_3": "Rovesci a intermittenza, per un totale di circa {amount}.",
+	"precip_chance_1": "Perlopiù asciutto, con una probabilità di rovesci fino al {percent}%.",
+	"precip_chance_2": "Poca pioggia prevista, ma c'è il {percent}% di probabilità di un rovescio di passaggio.",
+	"precip_chance_3": "Un {percent}% di rischio rovesci, ma nulla da ombrello.",
+	"precip_dry_1": "Resterà asciutto tutto il giorno.",
+	"precip_dry_2": "Non è attesa una goccia.",
+	"precip_dry_3": "Asciutto dall'inizio alla fine.",
+	"wind_dir_1": "Vento da {direction} fino a {speed}.",
+	"wind_dir_2": "Una brezza da {direction} tocca i {speed}.",
+	"wind_dir_3": "Il vento si mantiene da {direction}, con punte vicine a {speed}.",
+	"wind_dir_gusts_1": "Vento da {direction} fino a {speed}, con raffiche a {gust}.",
+	"wind_dir_gusts_2": "Un vento da {direction} di {speed}, con raffiche fino a {gust}.",
+	"wind_dir_gusts_3": "Attesi {speed} da {direction}, con raffiche di {gust} a tratti.",
+	"wind_1": "Vento fino a {speed}.",
+	"wind_2": "La brezza tocca circa {speed}.",
+	"wind_3": "Aria in movimento fino a {speed}.",
+	"wind_gusts_1": "Vento fino a {speed}, con raffiche a {gust}.",
+	"wind_gusts_2": "Fino a {speed}, con raffiche che arrivano a {gust}.",
+	"wind_gusts_3": "Giornata ventosa: {speed} costanti, {gust} nelle raffiche.",
+	"calm_1": "Quasi assenza di vento.",
+	"calm_2": "L'aria resta quasi immobile.",
+	"calm_3": "Praticamente senza vento per tutto il giorno.",
+	"uv_1": "Indice UV fino a {value} ({label}): proteggiti a metà giornata.",
+	"uv_2": "Il sole picchia a mezzogiorno: UV {value}, {label}.",
+	"uv_3": "Meglio cercare ombra a metà giornata: l'UV arriva a {value} ({label}).",
+	"legal_about": "Informazioni",
+	"legal_imprint": "Note legali",
+	"legal_privacy": "Privacy",
+	"legal_terms": "Condizioni",
+	"legal_nav": "Informazioni legali",
+	"city_weather": "Meteo a {city}",
+	"var_temperature": "Temperatura",
+	"var_temperature_short": "Temp",
+	"var_icons": "Icone meteo",
+	"var_icons_short": "Icone",
+	"var_apparent": "Percepita",
+	"var_apparent_short": "Percepita",
+	"var_dew_point": "Punto di rugiada",
+	"var_dew_point_short": "Rugiada",
+	"var_cloud": "Nuvolosità",
+	"var_cloud_short": "Nuvole",
+	"var_cloud_low": "Nuvolosità bassa",
+	"var_cloud_low_short": "Bassa",
+	"var_cloud_mid": "Nuvolosità media",
+	"var_cloud_mid_short": "Media",
+	"var_cloud_high": "Nuvolosità alta",
+	"var_cloud_high_short": "Alta",
+	"var_precipitation": "Precipitazioni",
+	"var_precipitation_short": "Precip.",
+	"var_pop": "Probabilità di precip.",
+	"var_pop_short": "Prob.",
+	"var_rain": "Pioggia",
+	"var_rain_short": "Pioggia",
+	"var_showers": "Rovesci",
+	"var_showers_short": "Rovesci",
+	"var_snowfall": "Nevicate",
+	"var_snowfall_short": "Neve",
+	"var_wind": "Velocità del vento",
+	"var_wind_short": "Vento",
+	"var_wind_dir": "Direzione del vento",
+	"var_wind_dir_short": "Dir.",
+	"var_gusts": "Raffiche",
+	"var_gusts_short": "Raffiche",
+	"var_humidity": "Umidità",
+	"var_humidity_short": "UR",
+	"var_pressure": "Pressione (MSL)",
+	"var_pressure_short": "MSLP",
+	"var_surface_pressure": "Pressione al suolo",
+	"var_surface_pressure_short": "Psfc",
+	"var_uv": "Indice UV",
+	"var_uv_short": "UV",
+	"var_visibility": "Visibilità",
+	"var_visibility_short": "Vis.",
+	"var_cape": "CAPE",
+	"var_cape_short": "CAPE",
+	"var_time": "Ora",
+	"no_data_title": "Nessun dato per questo modello qui",
+	"no_data_body": "Il modello selezionato non copre {location}: i modelli regionali forniscono dati solo nella propria area.",
+	"no_data_try_city": "Cambia località in {city}",
+	"no_data_best_match": "Passa a «Best match»",
+	"model_archive": "Rianalisi",
+	"model_seasonal": "Modello stagionale",
+	"nearby_cities_title": "Città nelle vicinanze",
+	"nearby_cities_subtitle": "Massime e minime del giorno selezionato",
+	"supporter_dialog_title": "Sostenitore Drizz.li",
+	"supporter_dialog_desc": "Incolla la chiave di accesso ricevuta via e-mail per sbloccare gli extra.",
+	"supporter_extras_active": "Gli extra per sostenitori sono attivi",
+	"supporter_lifetime": "Accesso a vita",
+	"supporter_active_until": "Attivo fino al {date}",
+	"supporter_access_key": "Chiave di accesso",
+	"supporter_key_invalid": "Questa chiave non è valida o è scaduta.",
+	"supporter_server_unreachable": "Server non raggiungibile. Controlla la connessione e riprova.",
+	"supporter_verifying": "Verifica in corso…",
+	"supporter_unlock_button": "Sblocca",
+	"supporter_remove_key": "Rimuovi la chiave da questo dispositivo",
+	"supporter_no_key_yet": "Non hai ancora una chiave?",
+	"supporter_support_from": "Sostieni il progetto da {price}",
+	"supporter_checking": "Verifica dell'abbonamento…",
+	"supporter_gate_title": "{feature} è un extra per sostenitori",
+	"supporter_gate_body": "Drizz.li è gratuito e open source. Contribuisci da {price} per tenerlo in vita - come ringraziamento, i sostenitori sbloccano gli extra.",
+	"supporter_become": "Diventa sostenitore",
+	"supporter_have_key": "Ho una chiave",
+	"supporter_key_expired": "La chiave salvata non è più valida o è scaduta.",
+	"supporter_enter_key": "Inserisci la tua chiave di accesso.",
+	"supporter_perk_historical": "Meteo storico e confronto con le normali climatiche",
+	"supporter_perk_seasonal": "Prospettive stagionali: i mesi a venire rispetto alla normale climatica",
+	"supporter_perk_future": "Nuovi extra non appena arrivano",
+	"action_close": "Chiudi",
+	"action_done": "Fatto",
+	"action_try_again": "Riprova",
+	"action_reset_defaults": "Ripristina i valori predefiniti",
+	"customize_meteograms": "Personalizza i meteogrammi",
+	"customizer_intro": "Trascina le variabili tra i grafici per costruire il tuo layout.",
+	"customizer_chart_n": "Grafico {number}",
+	"customizer_delete_chart": "Elimina il grafico {number}",
+	"customizer_add_chart": "+ Aggiungi grafico",
+	"customizer_available": "Variabili disponibili",
+	"customizer_drag": "Trascina {variable}",
+	"customizer_remove": "Rimuovi {variable}",
+	"customizer_drop_here": "Trascina qui le variabili",
+	"customizer_all_in_use": "Tutte le variabili sono in uso",
+	"variables_aria": "Selezione delle variabili",
+	"variables_close": "Chiudi la selezione delle variabili",
+	"variables_table_section": "Tabella oraria",
+	"variables_move_up": "Sposta {variable} in alto",
+	"variables_move_down": "Sposta {variable} in basso",
+	"variables_charts_hint_before": "Le variabili dei meteogrammi si impostano con il pulsante",
+	"variables_charts_hint_after": "sopra i grafici.",
+	"table_customize": "Personalizza le variabili",
+	"table_interval_aria": "Intervallo orario",
+	"table_now": "Ora",
+	"interval_toggle": "Alterna tra intervalli di 1 e 3 ore",
+	"charts_loading": "Caricamento dei grafici…",
+	"chart_download": "Scarica il meteogramma come immagine PNG",
+	"chart_credit_viz": "visualizzazione di",
+	"chart_toggle_series": "Mostra o nascondi {series}",
+	"legend_show": "Mostra legenda",
+	"meteograms_none_before": "Nessun meteogramma configurato,",
+	"meteograms_none_action": "aggiungi qualche variabile",
+	"meteograms_none_historical": "Nessun meteogramma configurato. Aggiungi variabili dalla pagina a 7 giorni.",
+	"search_searching": "Ricerca in corso…",
+	"search_favorites": "Preferiti",
+	"search_recent": "Recenti",
+	"search_hint": "Inizia a digitare o usa il GPS per rilevare la tua posizione",
+	"search_no_results": "Nessuna località trovata",
+	"search_remove_recent": "Rimuovi {location} dai luoghi recenti",
+	"search_remove_recent_short": "Rimuovi dai recenti",
+	"search_aria": "Cerca una località",
+	"search_gps": "Usa la posizione GPS",
+	"model_automatic_selection": "Selezione automatica",
+	"model_selector_aria": "Selezione di {label}",
+	"compare_models_heading": "Modelli",
+	"compare_variables_heading": "Variabili meteo orarie",
+	"compare_standard_preset": "Confronto standard",
+	"compare_weather_conditions": "Condizioni e copertura nuvolosa",
+	"compare_wind_direction_height": "Direzione del vento a {height} m",
+	"compare_standard_preset_description": "Un punto di partenza equilibrato per confrontare i modelli previsionali.",
+	"compare_preset_active": "Attivo",
+	"compare_custom_selection": "Personalizzata · {count} selezionate",
+	"compare_customize_variables": "Personalizza le variabili",
+	"compare_restore_defaults": "Ripristina la selezione standard",
+	"compare_variables_pending": "Selezione delle variabili modificata",
+	"compare_selected_models": "Modelli selezionati",
+	"compare_selection_pending": "Selezione modificata",
+	"compare_apply_selection": "Applica e ricarica i grafici",
+	"compare_discard_changes": "Annulla modifiche",
+	"compare_customize_models": "Personalizza modelli",
+	"compare_edit_models": "Modifica modelli",
+	"compare_edit_variables": "Modifica variabili",
+	"compare_edit_models_description": "Cerca modelli o seleziona intere famiglie di fornitori.",
+	"compare_edit_variables_description": "Cerca variabili o seleziona interi gruppi tematici.",
+	"compare_search_models": "Cerca modelli",
+	"compare_search_variables": "Cerca variabili",
+	"compare_show_model_names": "Mostra nomi dei modelli",
+	"compare_hide_model_names": "Nascondi nomi dei modelli",
+	"compare_only_selected": "Solo selezionati",
+	"compare_select_group": "Seleziona tutto",
+	"compare_clear_group": "Deseleziona tutto",
+	"compare_no_matching_options": "Nessuna opzione corrispondente.",
+	"compare_no_models_selected": "Nessun modello selezionato.",
+	"compare_remove_model": "Rimuovi {model}",
+	"compare_timeline_title": "Cronologia del confronto tra modelli",
+	"compare_model_label": "Modello",
+	"page_compare_title": "Confronto dei modelli meteo",
+	"page_compare_description": "Confronta le previsioni orarie di più modelli meteo per qualsiasi località.",
+	"compare_direction_subtitle": "Dispersione della direzione tra {count} modelli · senza media",
+	"compare_scalar_subtitle": "Tra {count} modelli · tratteggiato = media dei modelli",
+	"compare_precipitation_subtitle": "Tra {count} modelli · fascia inferiore = concordanza sulle precipitazioni",
+	"compare_precipitation_agreement": "Concordanza",
+	"compare_precipitation_agreement_tooltip": "{wet}/{available} con precipitazioni · mediana {median} {unit} · intervallo {min}–{max} {unit}",
+	"compare_model_mean": "Media dei modelli",
+	"compare_showing_previous": "Il confronto precedente rimane visibile.",
+	"compare_empty_selection": "Seleziona almeno un modello e una variabile meteo.",
+	"compare_no_data": "Nessuno dei modelli selezionati fornisce dati utilizzabili per questa località e selezione.",
+	"compare_weather_codes_only": "Le condizioni e la copertura nuvolosa sono mostrate nella cronologia in basso. Seleziona un’altra variabile per aggiungere un grafico.",
+	"compare_model_colors": "Colori dei modelli",
+	"compare_group_temperature": "Temperatura e umidità",
+	"compare_group_precipitation": "Precipitazioni e condizioni",
+	"compare_group_clouds": "Pressione e nuvole",
+	"compare_group_wind": "Vento e atmosfera",
+	"compare_group_upper_air": "Temperatura in quota",
+	"compare_many_models_warning": "Sono selezionati {count} modelli. Il confronto può essere più lento e i colori più difficili da distinguere.",
+	"compare_timeline_hint": "Condizioni per modello; lo sfondo dei pittogrammi indica la copertura nuvolosa totale",
+	"compare_timeline_scroll_aria": "Cronologia meteo scorrevole dei modelli",
+	"compare_timeline_caption": "Condizioni meteo orarie per modello di previsione",
+	"ensemble_trimmed": "L'ensemble di questo modello arriva solo a circa {days} giorni, quindi la dispersione è ridotta al periodo disponibile.",
+	"seasonal_explainer_before": "Una previsione stagionale mostra quanto un intero mese potrebbe",
+	"seasonal_explainer_strong": "discostarsi dalla sua normale climatica",
+	"seasonal_explainer_after": "- non il tempo di un singolo giorno. Guarda la tendenza mensile e l'accordo dell'ensemble, non gli sbalzi giornalieri.",
+	"seasonal_runs_to": "Queste prospettive arrivano fino al {date}.",
+	"seasonal_range_aria": "Periodo delle prospettive",
+	"seasonal_no_normal": "nessuna normale per questo mese",
+	"normals_loading": "caricamento della normale…",
+	"normals_loading_period": "caricamento della normale 1991–2020…",
+	"normal_band_legend": "banda normale = media 1991–2020",
+	"anomaly_vs_normal": "{value} rispetto alla normale",
+	"stat_avg_temperature": "Temperatura media",
+	"stat_mean_temperature": "Temperatura media",
+	"stat_total_precipitation": "Precipitazioni totali",
+	"stat_warmest_day": "Giorno più caldo",
+	"stat_coldest_day": "Giorno più freddo",
+	"historical_daily_heading": "Giornaliero",
+	"historical_daily_hint": "– seleziona un giorno per il dettaglio orario",
+	"historical_full_range": "– intervallo completo",
+	"historical_from": "Dal",
+	"historical_to": "Al",
+	"historical_quick_ranges": "Intervalli rapidi",
+	"historical_last_days": "{days} giorni",
+	"historical_month_last_year": "Questo mese, l'anno scorso",
+	"label_day": "giorno",
+	"label_night": "notte",
+	"daycards_past": "Ultimi 3 giorni",
+	"daycards_load_15": "Carica 15 giorni",
+	"error_technical_details": "Dettagli tecnici",
+	"err_network_title": "Servizio meteo non raggiungibile",
+	"err_network_hint": "Controlla la connessione a internet e riprova.",
+	"err_nodata_title": "Nessun dato per questa località con il modello selezionato",
+	"err_nodata_hint": "I modelli regionali coprono solo la propria area - \"Best match\" sceglie automaticamente un modello adatto.",
+	"err_rejected_title": "Il servizio meteo ha rifiutato la richiesta",
+	"err_rejected_hint": "Prova impostazioni diverse o torna al modello \"Best match\".",
+	"err_generic_title": "Caricamento dei dati meteo non riuscito",
+	"err_generic_hint": "Riprova tra un momento. Se continua, passa al modello \"Best match\".",
+	"maps_iframe_title": "Mappa interattiva di Open-Meteo",
+	"page_maps_title": "Mappa meteo",
+	"page_week_title": "Meteo",
+	"search_favorite_add": "Aggiungi ai preferiti",
+	"search_favorite_remove": "Rimuovi dai preferiti",
+	"supporter_price_per_month": "{amount} / mese",
+	"model_best_match_hint": "Sceglie automaticamente il modello migliore per questa località",
+	"model_updated": "aggiornato {cadence}",
+	"cadence_every_hour": "ogni ora",
+	"cadence_every_hours": "ogni {hours} h",
+	"cadence_daily": "ogni giorno",
+	"cadence_monthly": "ogni mese",
+	"cadence_varies": "variabile",
+	"model_group_automatic": "Automatico",
+	"model_group_reanalysis": "Rianalisi ECMWF",
+	"model_group_regional_reanalysis": "Rianalisi regionale"
+}

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "open-meteo-weather",
+	"name": "drizzli",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
@@ -14,47 +14,45 @@
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run",
-		"upgrade:ui": "npx shadcn-svelte@latest add alert button card checkbox dialog input label select separator switch -y -o && prettier --write src/lib/components/ui"
+		"upgrade:ui": "npx shadcn-svelte@latest add alert button card checkbox dialog input label popover select separator switch -y -o && prettier --write src/lib/components/ui"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.4.0",
+		"@eslint/compat": "^2.1.0",
-		"@eslint/js": "^9.39.1",
+		"@eslint/js": "^10.0.1",
-		"@internationalized/date": "^3.10.1",
+		"@inlang/paraglide-js": "^2.23.0",
-		"@lucide/svelte": "^0.561.0",
+		"@internationalized/date": "^3.12.2",
+		"@lucide/svelte": "^1.25.0",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/kit": "^2.70.1",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
-		"@tailwindcss/vite": "^4.1.17",
+		"@tailwindcss/vite": "^4.3.3",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
-		"@types/node": "^24",
+		"@types/node": "^26",
-		"@vitest/browser-playwright": "^4.0.15",
+		"@vitest/browser-playwright": "^4.1.10",
-		"bits-ui": "^2.15.4",
+		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
-		"eslint": "^9.39.1",
+		"date-fns": "^4.4.0",
+		"date-fns-tz": "^3.2.0",
+		"eslint": "^10.7.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.13.1",
+		"eslint-plugin-svelte": "^3.21.0",
-		"globals": "^16.5.0",
+		"globals": "^17.7.0",
-		"playwright": "^1.57.0",
+		"openmeteo": "^1.2.3",
-		"prettier": "^3.7.4",
+		"playwright": "^1.61.1",
-		"prettier-plugin-svelte": "^3.4.0",
+		"prettier": "^3.9.5",
-		"prettier-plugin-tailwindcss": "^0.7.2",
+		"prettier-plugin-svelte": "^3.5.2",
-		"svelte": "^5.45.6",
+		"prettier-plugin-tailwindcss": "^0.8.1",
-		"svelte-check": "^4.3.4",
+		"svelte": "^5.56.6",
+		"svelte-check": "^4.7.3",
 		"svelte-persisted-store": "^0.12.0",
-		"tailwind-merge": "^3.4.0",
+		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
-		"tailwindcss": "^4.1.17",
+		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
-		"typescript": "^5.9.3",
+		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.48.1",
+		"typescript-eslint": "^8.64.0",
-		"vite": "^7.2.6",
+		"vite": "^8.1.5",
-		"vitest": "^4.0.15",
+		"vitest": "^4.1.10",
-		"vitest-browser-svelte": "^2.0.1"
+		"vitest-browser-svelte": "^3.0.0"
-	},
-	"dependencies": {
-		"@openmeteo/sdk": "^1.23.0",
-		"highcharts": "^12.4.0",
-		"mode-watcher": "^1.1.0",
-		"openmeteo": "^1.2.3"
 	}
 }

project.inlang/settings.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"baseLocale": "en",
+	"locales": ["en", "de", "es", "fr", "it"],
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4.4.0/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2.2.6/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	}
+}

scripts/build-cities.mjs

@@ -0,0 +1,119 @@
+/**
+ * Regenerates static/data/cities/ - the city lists the "nearby cities" section
+ * on the week page picks from.
+ *
+ * Source: GeoNames (CC BY 4.0) via the cities500 mirror.
+ *
+ * The full list of towns down to 20k inhabitants is ~1 MB, far too much to ship
+ * to a phone for one section, so it is cut into 10x10 degree tiles. A tile
+ * holds every town within NEAR_RADIUS_KM of anywhere inside it, plus the larger
+ * cities within FAR_RADIUS_KM - so one small fetch answers both "what is around
+ * the corner" and "what is the nearest place you would recognise" (which is all
+ * a location in, say, the Australian outback can offer). Tiles overlap by
+ * design; duplicating a few rows is cheaper than a second round trip.
+ *
+ * The ids are GeoNames ids, which is what Open-Meteo's geocoding API returns,
+ * so a row can be turned into a location route without another lookup.
+ *
+ * Run with: node scripts/build-cities.mjs
+ */
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const SOURCE = 'https://raw.githubusercontent.com/lmfmaier/cities-json/master/cities500.json';
+
+const MIN_POPULATION = 20_000;
+/** every city of any size within this range of the tile */
+const NEAR_RADIUS_KM = 400;
+/** only cities above FAR_MIN_POPULATION out to here */
+const FAR_RADIUS_KM = 1500;
+const FAR_MIN_POPULATION = 300_000;
+const TILE_DEGREES = 10;
+
+const outDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'static', 'data', 'cities');
+
+// CITIES_SOURCE_FILE lets you build from an already-downloaded copy, which is
+// also the only way to run this behind a proxy that node doesn't pick up.
+const localSource = process.env.CITIES_SOURCE_FILE;
+const source = localSource
+	? JSON.parse(await readFile(localSource, 'utf8'))
+	: await fetch(SOURCE).then((res) => {
+			if (!res.ok) throw new Error(`source fetch failed: ${res.status}`);
+			return res.json();
+		});
+
+const cities = source
+	.map((c) => ({
+		id: Number(c.id),
+		name: c.name,
+		country: c.country,
+		lat: Number(c.lat),
+		lon: Number(c.lon),
+		pop: Number(c.pop ?? 0)
+	}))
+	.filter((c) => Number.isFinite(c.lat) && Number.isFinite(c.lon) && c.pop >= MIN_POPULATION)
+	// biggest first, so a tile that gets truncated keeps the recognisable names
+	.sort((a, b) => b.pop - a.pop);
+
+const toRad = Math.PI / 180;
+
+/** Distance from a point to the nearest point of a lat/lon rectangle. */
+function distanceToTileKm(lat, lon, latMin, latMax, lonMin, lonMax) {
+	const clampedLat = Math.min(latMax, Math.max(latMin, lat));
+	// longitude distance shrinks towards the poles, measured at the closest latitude
+	let dLon = 0;
+	if (lon < lonMin) dLon = lonMin - lon;
+	else if (lon > lonMax) dLon = lon - lonMax;
+	if (dLon > 180) dLon = 360 - dLon;
+
+	const dLat = Math.abs(clampedLat - lat);
+	const lonKm = dLon * 111.32 * Math.cos(clampedLat * toRad);
+	return Math.hypot(dLat * 111.32, lonKm);
+}
+
+const tiles = new Map();
+for (let latIndex = 0; latIndex < 180 / TILE_DEGREES; latIndex++) {
+	for (let lonIndex = 0; lonIndex < 360 / TILE_DEGREES; lonIndex++) {
+		const latMin = -90 + latIndex * TILE_DEGREES;
+		const lonMin = -180 + lonIndex * TILE_DEGREES;
+		const bounds = [latMin, latMin + TILE_DEGREES, lonMin, lonMin + TILE_DEGREES];
+
+		const rows = [];
+		for (const c of cities) {
+			const dist = distanceToTileKm(c.lat, c.lon, ...bounds);
+			const inRange =
+				dist <= NEAR_RADIUS_KM || (c.pop >= FAR_MIN_POPULATION && dist <= FAR_RADIUS_KM);
+			if (!inRange) continue;
+			// tuples, not objects: same data, roughly half the bytes
+			rows.push([
+				c.id,
+				c.name,
+				c.country,
+				+c.lat.toFixed(3),
+				+c.lon.toFixed(3),
+				Math.round(c.pop / 1000)
+			]);
+		}
+		if (rows.length > 0) tiles.set(`${latIndex}_${lonIndex}`, rows);
+	}
+}
+
+await rm(outDir, { recursive: true, force: true });
+await mkdir(outDir, { recursive: true });
+
+let bytes = 0;
+for (const [key, rows] of tiles) {
+	const json = JSON.stringify(rows);
+	bytes += json.length;
+	await writeFile(join(outDir, `${key}.json`), json, 'utf8');
+}
+// the index tells the client which tiles exist, so an empty ocean tile is a
+// no-op instead of a 404
+await writeFile(join(outDir, 'index.json'), JSON.stringify([...tiles.keys()]), 'utf8');
+
+const largest = Math.max(...[...tiles.values()].map((r) => r.length));
+console.log(
+	`wrote ${tiles.size} tiles (${(bytes / 1024 / 1024).toFixed(1)} MB total, ` +
+		`avg ${Math.round(bytes / tiles.size / 1024)} KB, largest ${largest} cities) to ${outDir}`
+);

src/app.html

@@ -1,8 +1,22 @@
 <!doctype html>
-<html lang="en">
+<html lang="%paraglide.lang%">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			// apply the persisted theme before first paint to avoid a flash
+			try {
+				var theme = JSON.parse(localStorage.getItem('theme') || '"system"');
+				if (
+					theme === 'dark' ||
+					(theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)
+				) {
+					document.documentElement.classList.add('dark');
+				}
+			} catch (e) {
+				/* ignore */
+			}
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/demo.spec.ts

@@ -1,7 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});

src/hooks.server.ts

@@ -0,0 +1,16 @@
+import { paraglideMiddleware } from '$lib/paraglide/server';
+
+import type { Handle } from '@sveltejs/kit';
+
+/**
+ * Runs for every prerendered page, so the HTML written to disk is already in the
+ * right language and carries a matching `<html lang>` - the client never has to
+ * repaint the page into its locale.
+ */
+export const handle: Handle = ({ event, resolve }) =>
+	paraglideMiddleware(event.request, ({ request, locale }) => {
+		event.request = request;
+		return resolve(event, {
+			transformPageChunk: ({ html }) => html.replace('%paraglide.lang%', locale)
+		});
+	});

src/hooks.ts

@@ -0,0 +1,10 @@
+import { deLocalizeUrl } from '$lib/paraglide/runtime';
+
+import type { Reroute } from '@sveltejs/kit';
+
+/**
+ * The locale lives in the URL (`/de/weather/week/`), but the routes on disk are
+ * language-neutral. Stripping the prefix here lets one route tree serve every
+ * language - on the server, during prerendering and on client-side navigation.
+ */
+export const reroute: Reroute = (request) => deLocalizeUrl(request.url).pathname;

src/lib/assets/favicon.svg

@@ -1 +1,46 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+	<title></title>
+	<defs>
+		<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+			<stop offset="0" stop-color="#e0f2fe" />
+			<stop offset="1" stop-color="#bae6fd" />
+		</linearGradient>
+		<linearGradient id="canopy" x1="0" y1="0" x2="0" y2="1">
+			<stop offset="0" stop-color="#fb923c" />
+			<stop offset="1" stop-color="#ea580c" />
+		</linearGradient>
+		<linearGradient id="drop" x1="0" y1="0" x2="0" y2="1">
+			<stop offset="0" stop-color="#38bdf8" />
+			<stop offset="1" stop-color="#2563eb" />
+		</linearGradient>
+	</defs>
+	<rect width="64" height="64" rx="14" fill="url(#sky)" />
+	<!-- raindrops falling onto the umbrella -->
+	<path d="M12 5c2 2.9 3 4.6 3 6.2a3 3 0 0 1-6 0c0-1.6 1-3.3 3-6.2Z" fill="url(#drop)" />
+	<path d="M53 4c2 2.9 3 4.6 3 6.2a3 3 0 0 1-6 0c0-1.6 1-3.3 3-6.2Z" fill="url(#drop)" />
+	<path d="M23 2.5c1.7 2.4 2.5 3.9 2.5 5.2a2.5 2.5 0 0 1-5 0c0-1.3.8-2.8 2.5-5.2Z" fill="url(#drop)" />
+	<path d="M45 12c1.7 2.4 2.5 3.9 2.5 5.2a2.5 2.5 0 0 1-5 0c0-1.3.8-2.8 2.5-5.2Z" fill="url(#drop)" />
+	<!-- pole with curved handle -->
+	<path
+		d="M33 35v17a4.5 4.5 0 0 1-9 0"
+		fill="none"
+		stroke="#475569"
+		stroke-width="3.25"
+		stroke-linecap="round"
+	/>
+	<!-- canopy tip -->
+	<path d="M33 13.5v4" fill="none" stroke="#475569" stroke-width="3" stroke-linecap="round" />
+	<!-- canopy with scalloped edge -->
+	<path
+		d="M11 37c0-11.6 9.8-21 22-21s22 9.4 22 21c-1.8-2.9-5.5-2.9-7.3 0-1.9-2.9-5.5-2.9-7.4 0-1.8-2.9-5.5-2.9-7.3 0-1.9-2.9-5.5-2.9-7.4 0-1.8-2.9-5.5-2.9-7.3 0-1.9-2.9-5.5-2.9-7.3 0Z"
+		fill="url(#canopy)"
+	/>
+	<!-- ribs -->
+	<path
+		d="M33 16.5c-5.2 3-7.4 11-7.3 19M33 16.5c5.2 3 7.4 11 7.3 19"
+		fill="none"
+		stroke="#9a3412"
+		stroke-width="1.5"
+		opacity="0.35"
+	/>
+</svg>

src/lib/charts/bands.ts

@@ -0,0 +1,24 @@
+/**
+ * Daylight Bands
+ *
+ * Converts sunrise/sunset timestamp arrays into neutral background band
+ * descriptors that CanvasChart renders as shaded daylight areas.
+ */
+
+/** A background band on the time axis, expressed in epoch seconds. */
+export interface DaylightBand {
+	/** Band start (epoch seconds) */
+	start: number;
+	/** Band end (epoch seconds) */
+	end: number;
+}
+
+/**
+ * Builds daylight bands from sunrise/sunset arrays.
+ *
+ * @param sunrise - Array of sunrise timestamps (unix seconds)
+ * @param sunset  - Array of sunset timestamps (unix seconds)
+ */
+export function buildDaylightBands(sunrise: number[], sunset: number[]): DaylightBand[] {
+	return sunrise.map((r, i) => ({ start: r, end: sunset[i] }));
+}

src/lib/charts/data.ts

@@ -0,0 +1,105 @@
+/**
+ * Chart Data Helpers
+ *
+ * Shared color palette and data-processing helpers used by the chart pages.
+ * Ported from the previous ECharts utilities so the visual identity and
+ * calculations stay identical.
+ */
+
+// ─── Color Palette ───────────────────────────────────────────────────────────
+
+/** Default series color palette matching the application's design system */
+export const SERIES_COLORS = [
+	'#5470c6',
+	'#91cc75',
+	'#fac858',
+	'#ee6666',
+	'#73c0de',
+	'#3ba272',
+	'#fc8452',
+	'#9a60b4',
+	'#ea7ccc',
+	'#4dc9f6'
+] as const;
+
+/** Semantic colors used for specific chart elements */
+export const CHART_COLORS = {
+	average: '#5e5e5e',
+	currentTimeLine: '#ef4444',
+	daylight: 'rgba(255, 255, 194, 0.3)',
+	memberLine: 'rgba(115, 192, 222, 0.45)'
+} as const;
+
+// ─── Utility: Detect column-type variables ───────────────────────────────────
+
+/** Units that should be rendered as bar/column charts instead of lines. */
+const COLUMN_UNITS = new Set(['mm', 'cm', 'in', 'inch', 'MJ/m²']);
+
+/**
+ * Returns true if the given unit should be rendered as a bar chart.
+ */
+export function isColumnUnit(unit: string): boolean {
+	return COLUMN_UNITS.has(unit.trim());
+}
+
+// ─── Data Processing Helpers ─────────────────────────────────────────────────
+
+export interface AverageResult {
+	average: (number | null)[];
+	averageCount: number[];
+}
+
+/**
+ * Calculates per-timestep average and count from hourly model data.
+ *
+ * @param hourlyData - The `data.hourly` object from the API response
+ * @param variable   - The variable prefix to filter on (e.g. 'temperature_2m')
+ * @param timeLength - Number of timesteps
+ * @returns Object containing running average and count arrays
+ */
+export function calculateAverage(
+	hourlyData: Record<string, unknown>,
+	variable: string,
+	timeLength: number
+): AverageResult {
+	const totals = new Array<number>(timeLength).fill(0);
+	const averageCount = new Array<number>(timeLength).fill(0);
+
+	for (const [model, values] of Object.entries(hourlyData)) {
+		if (model === 'time') continue;
+		if (!model.startsWith(variable)) continue;
+
+		for (const [index, val] of (values as number[]).entries()) {
+			if (val !== null && val !== undefined && isFinite(val)) {
+				if (index >= timeLength) continue;
+				totals[index] += val;
+				averageCount[index]++;
+			}
+		}
+	}
+
+	// Finalize average values
+	const average = totals.map((total, i) =>
+		averageCount[i] > 0 ? Math.round((total / averageCount[i]) * 10) / 10 : null
+	);
+
+	return { average, averageCount };
+}
+
+/**
+ * Finds the unit string for a given variable from the hourly_units map.
+ * Returns an empty string if the variable is not found.
+ */
+export function findUnit(
+	hourlyUnits: Record<string, string>,
+	hourlyData: Record<string, unknown>,
+	variable: string
+): string {
+	for (const model of Object.keys(hourlyData)) {
+		if (model === 'time') continue;
+		if (model.startsWith(variable) && hourlyUnits[model]) {
+			return hourlyUnits[model];
+		}
+	}
+	return '';
+}

src/lib/charts/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Canvas Charts — Barrel Export
+ *
+ * Usage:
+ *   import { CanvasChart, buildDaylightBands, SERIES_COLORS } from '$lib/charts';
+ */
+
+export {
+	default as CanvasChart,
+	setGroupHover,
+	setGroupRange,
+	registerGroupMember,
+	groupRange,
+	groupHover
+} from './CanvasChart.svelte';
+export type {
+	ChartAgreementPoint,
+	ChartAgreementStrip,
+	ChartSeries
+} from './CanvasChart.svelte';
+
+export { buildDaylightBands } from './bands';
+export type { DaylightBand } from './bands';
+
+export { CHART_COLORS, SERIES_COLORS, calculateAverage, findUnit, isColumnUnit } from './data';
+export type { AverageResult } from './data';

src/lib/components/charts/ChartContainer.svelte

@@ -0,0 +1,159 @@
+<!--
+  ChartContainer.svelte — Consistent chart layout wrapper
+
+  Provides a container with:
+  - Consistent padding and spacing
+  - Loading overlay with spinner
+  - Fade transitions
+  - Responsive min-height calculation
+  - Slot for chart content
+
+  Usage:
+    <ChartContainer loading={!chartsReady} chartCount={3}>
+      {#each charts as chart}
+        <CanvasChart {...chart} />
+      {/each}
+    </ChartContainer>
+-->
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import * as m from '$lib/paraglide/messages';
+
+	import type { Snippet } from 'svelte';
+
+	// ─── Props ──────────────────────────────────────────────────────────────────
+
+	interface Props {
+		/** Whether the charts are still loading */
+		loading?: boolean;
+		/** Number of charts being rendered (used for min-height calculation) */
+		chartCount?: number;
+		/** Height per individual chart in pixels (default: 300) */
+		chartHeight?: number;
+		/** Extra vertical padding in pixels added to the total min-height (default: 2) */
+		extraPadding?: number;
+		/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
+		minWidth?: number;
+		/** Bleed the chart into the page gutters (edge-to-edge). Off when nested in a card. */
+		bleed?: boolean;
+		/** Optional CSS class for the outer wrapper */
+		class?: string;
+		/** Slot content (charts go here) */
+		children?: Snippet;
+	}
+
+	let {
+		loading = true,
+		chartCount = 1,
+		chartHeight = 300,
+		extraPadding = 2,
+		minWidth = 560,
+		bleed = true,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// ─── Computed ───────────────────────────────────────────────────────────────
+
+	let minHeight = $derived(chartHeight * chartCount + extraPadding);
+</script>
+
+<div class="chart-bleed" class:no-bleed={!bleed}>
+	<div
+		class="chart-container relative {className}"
+		style:min-height="{minHeight}px"
+		style="--chart-min-width: {minWidth}px"
+	>
+		<!-- Chart content area -->
+		<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		<!-- Loading overlay -->
+		<div
+			class="loading-overlay absolute inset-0 z-30 flex items-center justify-center rounded-lg bg-background transition-opacity duration-300"
+			class:pointer-events-none={!loading}
+			class:opacity-0={!loading}
+			class:opacity-100={loading}
+		>
+			<div class="flex flex-col items-center gap-3">
+				<svg
+					class="lucide lucide-loader-circle animate-spin text-muted-foreground"
+					xmlns="http://www.w3.org/2000/svg"
+					width="40"
+					height="40"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+				</svg>
+				<span class="sr-only">{m.charts_loading()}</span>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.chart-bleed {
+		/* Bleed exactly into the page padding on mobile (main has p-3 =
+		   0.75rem) for edge-to-edge charts, and a bit past the content
+		   column on md+ (main has 2rem padding) for extra readability. */
+		margin-left: -0.75rem;
+		margin-right: -0.75rem;
+		/* overflow-y is pinned (never `visible`): a bare `overflow-x: auto`
+		   makes the browser compute overflow-y as `auto` too, which turns the
+		   chart into a 1-2px vertical micro-scroller that swallows page scroll. */
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	.chart-bleed.no-bleed {
+		margin-left: 0;
+		margin-right: 0;
+		/* content fits the column, so no horizontal scroller is needed */
+		overflow-x: hidden;
+	}
+
+	.chart-container {
+		min-width: var(--chart-min-width);
+	}
+
+	/* Below lg: fit the chart to the viewport instead of forcing a min-width
+	   sideways scroll (which fights touch inspection). Pinch to zoom for detail. */
+	@media (max-width: 1023px) {
+		.chart-container {
+			min-width: 0;
+		}
+		.chart-bleed {
+			overflow-x: hidden;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.chart-bleed {
+			margin-left: -1.5rem;
+			margin-right: -1.5rem;
+		}
+		.chart-bleed.no-bleed {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	.chart-content {
+		width: 100%;
+	}
+
+	/* Smooth transition for the loading overlay */
+	.loading-overlay {
+		will-change: opacity;
+	}
+</style>

src/lib/components/charts/ChartToolbar.svelte

@@ -0,0 +1,176 @@
+<!--
+  ChartToolbar.svelte — Chart action bar with download and display controls
+
+  Provides a toolbar row with:
+  - Download full meteogram as PNG button
+  - Slot for additional custom controls (e.g. legend toggle)
+
+  When multiple charts are provided, they are stitched into a single
+  combined image on download.
+
+  Usage:
+    <ChartToolbar
+      charts={chartComponents}
+      fileName="model-comparison"
+    >
+      {#snippet controls()}
+        <Switch bind:checked={showLegend} />
+      {/snippet}
+    </ChartToolbar>
+-->
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+
+	import {
+		type ChartDownloadOptions,
+		type ChartExportItem,
+		type ExportableChart,
+		downloadChartsPng
+	} from './downloadChartsPng';
+
+	import type { Snippet } from 'svelte';
+
+	// ─── Props ──────────────────────────────────────────────────────────────────
+
+	interface Props {
+		/** Chart components available for download (undefined entries are skipped) */
+		charts?: Array<ChartExportItem | ExportableChart | undefined | null>;
+		/** Base file name for downloaded images (without extension) */
+		fileName?: string;
+		/** Optional title and shared legend drawn into the combined PNG. */
+		exportOptions?: ChartDownloadOptions;
+		/** Optional CSS class for the outer container */
+		class?: string;
+		/** Slot for additional controls (switches, checkboxes, etc.) */
+		controls?: Snippet;
+	}
+
+	let {
+		charts = [],
+		fileName = 'drizzli-chart',
+		exportOptions,
+		class: className = '',
+		controls
+	}: Props = $props();
+
+	// ─── State ──────────────────────────────────────────────────────────────────
+
+	let downloading = $state(false);
+
+	// ─── Computed ───────────────────────────────────────────────────────────────
+
+	let hasCharts = $derived(
+		charts.some((item) => item != null && ('chart' in item ? item.chart != null : true))
+	);
+
+	// ─── Download ───────────────────────────────────────────────────────────────
+
+	async function handleDownload(): Promise<void> {
+		if (!hasCharts || downloading) return;
+		downloading = true;
+		try {
+			await downloadChartsPng(charts, fileName, exportOptions);
+		} finally {
+			setTimeout(() => {
+				downloading = false;
+			}, 500);
+		}
+	}
+</script>
+
+<div
+	class="chart-toolbar flex flex-col items-center gap-4 md:flex-row md:justify-between {className}"
+>
+	<!-- Left side: Custom controls slot -->
+	<div class="flex flex-wrap items-center gap-4 md:gap-6">
+		{#if controls}
+			{@render controls()}
+		{/if}
+	</div>
+
+	<!-- Right side: Download button -->
+	<div class="flex flex-wrap items-center gap-2">
+		<button
+			type="button"
+			class="toolbar-btn"
+			disabled={!hasCharts || downloading}
+			onclick={handleDownload}
+			title={m.chart_download()}
+		>
+			{#if downloading}
+				<svg
+					class="h-4 w-4 animate-spin"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+				</svg>
+			{:else}
+				<svg
+					class="h-4 w-4"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+					<polyline points="7 10 12 15 17 10" />
+					<line x1="12" y1="15" x2="12" y2="3" />
+				</svg>
+			{/if}
+			<span>PNG</span>
+		</button>
+	</div>
+</div>
+
+<style>
+	.toolbar-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1.25rem;
+		color: hsl(var(--muted-foreground));
+		background: hsl(var(--muted) / 0.5);
+		border: 1px solid hsl(var(--border));
+		border-radius: var(--radius, 0.375rem);
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease,
+			border-color 150ms ease;
+		white-space: nowrap;
+		user-select: none;
+	}
+
+	.toolbar-btn:hover:not(:disabled) {
+		color: hsl(var(--foreground));
+		background: hsl(var(--muted));
+		border-color: hsl(var(--foreground) / 0.2);
+	}
+
+	.toolbar-btn:active:not(:disabled) {
+		background: hsl(var(--muted) / 0.8);
+		transform: translateY(0.5px);
+	}
+
+	.toolbar-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.toolbar-btn:focus-visible {
+		outline: 2px solid hsl(var(--ring));
+		outline-offset: 2px;
+	}
+</style>

src/lib/components/charts/downloadChartsPng.ts

@@ -0,0 +1,175 @@
+/**
+ * Shared PNG export for charts.
+ *
+ * Each chart composites itself (plot + icon bands + optional title + legend)
+ * onto a canvas via `getExportImage`; those are stacked vertically over the
+ * current theme background and downloaded as one PNG.
+ */
+
+/** A chart that can composite itself (plot + icons + legend) for export. */
+export interface ExportableChart {
+	getExportImage(opts?: { title?: string }): Promise<HTMLCanvasElement | null>;
+}
+
+/** One chart to export, with the title to render above it (e.g. panel name). */
+export interface ChartExportItem {
+	chart: ExportableChart | null | undefined;
+	title?: string;
+}
+
+export interface ExportLegendItem {
+	name: string;
+	color: string;
+	style?: 'point' | 'line' | 'dashed' | 'bar';
+}
+
+export interface ChartDownloadOptions {
+	title?: string;
+	legend?: ExportLegendItem[];
+}
+
+/** Resolves the page background so exports match the current theme. */
+function exportBackground(): string {
+	const bg = getComputedStyle(document.documentElement).getPropertyValue('--background').trim();
+	return bg || '#ffffff';
+}
+
+function triggerDownload(url: string, name: string): void {
+	const link = document.createElement('a');
+	link.href = url;
+	link.download = name;
+	link.style.display = 'none';
+	document.body.appendChild(link);
+	link.click();
+	requestAnimationFrame(() => {
+		document.body.removeChild(link);
+	});
+}
+
+/** Normalise either a bare chart or a {chart, title} item. */
+function toItem(x: ChartExportItem | ExportableChart | null | undefined): ChartExportItem {
+	if (x && 'getExportImage' in x) return { chart: x };
+	return (x as ChartExportItem) ?? { chart: null };
+}
+
+/**
+ * Stitch the given charts into one PNG and download it. Resolves once the
+ * download has been triggered (or immediately if there is nothing to export).
+ */
+export async function downloadChartsPng(
+	charts: Array<ChartExportItem | ExportableChart | null | undefined>,
+	fileName: string,
+	options: ChartDownloadOptions = {}
+): Promise<void> {
+	const items = charts
+		.map(toItem)
+		.filter(
+			(it): it is ChartExportItem & { chart: ExportableChart } =>
+				typeof it.chart?.getExportImage === 'function'
+		);
+	if (items.length === 0) return;
+
+	// A supplementary panel must never prevent the remaining charts from being
+	// downloaded. Invalid adapters are filtered above; rejected renders are
+	// isolated here instead of aborting the complete Promise.all chain.
+	const rendered = await Promise.allSettled(
+		items.map((it) => it.chart.getExportImage({ title: it.title }))
+	);
+	const canvases = rendered.flatMap((result) =>
+		result.status === 'fulfilled' &&
+		result.value != null &&
+		result.value.width > 0 &&
+		result.value.height > 0
+			? [result.value]
+			: []
+	);
+	if (canvases.length === 0) return;
+
+	const maxWidth = Math.max(...canvases.map((c) => c.width));
+	const dpr = window.devicePixelRatio || 1;
+	const padding = 12 * dpr;
+	const gap = 14 * dpr;
+	const rowHeight = 22 * dpr;
+	const measure = document.createElement('canvas').getContext('2d');
+	const legendRows: ExportLegendItem[][] = [];
+	if (measure && options.legend?.length) {
+		measure.font = `${12 * dpr}px system-ui, -apple-system, sans-serif`;
+		let row: ExportLegendItem[] = [];
+		let rowWidth = 0;
+		for (const item of options.legend) {
+			const width = 18 * dpr + measure.measureText(item.name).width;
+			if (row.length > 0 && rowWidth + gap + width > maxWidth - padding * 2) {
+				legendRows.push(row);
+				row = [];
+				rowWidth = 0;
+			}
+			row.push(item);
+			rowWidth += (rowWidth > 0 ? gap : 0) + width;
+		}
+		if (row.length > 0) legendRows.push(row);
+	}
+	const titleHeight = options.title ? 34 * dpr : 0;
+	const legendHeight = legendRows.length > 0 ? legendRows.length * rowHeight + 8 * dpr : 0;
+	const totalHeight = titleHeight + canvases.reduce((sum, c) => sum + c.height, 0) + legendHeight;
+
+	const canvas = document.createElement('canvas');
+	canvas.width = maxWidth;
+	canvas.height = totalHeight;
+
+	const ctx = canvas.getContext('2d');
+	if (!ctx) return;
+
+	ctx.fillStyle = exportBackground();
+	ctx.fillRect(0, 0, maxWidth, totalHeight);
+
+	const styles = getComputedStyle(document.documentElement);
+	const foreground = styles.getPropertyValue('--foreground').trim() || '#1f2937';
+	const muted = styles.getPropertyValue('--muted-foreground').trim() || '#6b7280';
+	let y = 0;
+	if (options.title) {
+		ctx.fillStyle = foreground;
+		ctx.font = `600 ${16 * dpr}px system-ui, -apple-system, sans-serif`;
+		ctx.textBaseline = 'middle';
+		ctx.fillText(options.title, padding, 17 * dpr);
+		y += 34 * dpr;
+	}
+	for (const c of canvases) {
+		ctx.drawImage(c, 0, y);
+		y += c.height;
+	}
+	if (legendRows.length > 0) {
+		y += 8 * dpr;
+		ctx.font = `${12 * dpr}px system-ui, -apple-system, sans-serif`;
+		ctx.textBaseline = 'middle';
+		for (const row of legendRows) {
+			let x = padding;
+			for (const item of row) {
+				const markerWidth = 12 * dpr;
+				ctx.strokeStyle = item.color;
+				ctx.fillStyle = item.color;
+				ctx.lineWidth = 2 * dpr;
+				ctx.setLineDash(item.style === 'dashed' ? [4 * dpr, 3 * dpr] : []);
+				if (item.style === 'point') {
+					ctx.beginPath();
+					ctx.arc(x + markerWidth / 2, y + rowHeight / 2, 3 * dpr, 0, Math.PI * 2);
+					ctx.fill();
+				} else if (item.style === 'bar') {
+					ctx.fillRect(x + 3 * dpr, y + 5 * dpr, 6 * dpr, 12 * dpr);
+				} else {
+					ctx.beginPath();
+					ctx.moveTo(x, y + rowHeight / 2);
+					ctx.lineTo(x + markerWidth, y + rowHeight / 2);
+					ctx.stroke();
+				}
+				ctx.setLineDash([]);
+				x += markerWidth + 6 * dpr;
+				ctx.fillStyle = muted;
+				ctx.fillText(item.name, x, y + rowHeight / 2);
+				x += ctx.measureText(item.name).width + gap;
+			}
+			y += rowHeight;
+		}
+	}
+
+	triggerDownload(canvas.toDataURL('image/png'), `${fileName}.png`);
+}

src/lib/components/charts/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Chart Components — Barrel Export
+ *
+ * Re-exports all chart-related Svelte components from a single entry point.
+ *
+ * Usage:
+ *   import { ChartContainer, ChartToolbar } from '$lib/components/charts';
+ */
+
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as ChartToolbar } from './ChartToolbar.svelte';
+export {
+	downloadChartsPng,
+	type ChartDownloadOptions,
+	type ChartExportItem,
+	type ExportableChart,
+	type ExportLegendItem
+} from './downloadChartsPng';

src/lib/components/language-options.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import { LOCALE_LABELS, LOCALE_LIST } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
+	import { type Locale, getLocale, localizeHref } from '$lib/paraglide/runtime';
+
+	interface Props {
+		/** Called after a language is picked (used to close the menu around it). */
+		onSelect?: () => void;
+	}
+
+	let { onSelect }: Props = $props();
+
+	let current = $derived.by(() => {
+		// re-read on navigation: the URL is what decides the locale
+		void $page.url.pathname;
+		return getLocale();
+	});
+
+	/** The current page, in another language. */
+	function switchTo(locale: Locale): string {
+		return localizeHref($page.url.pathname + $page.url.search, { locale });
+	}
+</script>
+
+<div>
+	<span
+		class="mb-1.5 block text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
+	>
+		{m.language_label()}
+	</span>
+	<!-- Plain links, not buttons: the locale lives in the URL, so switching
+	     language is a navigation. It also means each option is shareable and
+	     crawlable. -->
+	<div class="grid grid-cols-2 gap-1">
+		{#each LOCALE_LIST as locale (locale)}
+			{@const active = current === locale}
+			<a
+				href={switchTo(locale)}
+				hreflang={locale}
+				data-sveltekit-reload
+				class="cursor-pointer rounded-md px-2 py-1.5 text-center text-[13px] font-semibold transition-colors {active
+					? 'bg-primary text-primary-foreground'
+					: 'bg-muted text-muted-foreground hover:text-foreground'}"
+				aria-current={active ? 'true' : undefined}
+				onclick={onSelect}
+			>
+				{LOCALE_LABELS[locale]}
+			</a>
+		{/each}
+	</div>
+</div>

src/lib/components/language-selector.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import LanguageOptions from '$lib/components/language-options.svelte';
+	import * as Popover from '$lib/components/ui/popover';
+
+	import * as m from '$lib/paraglide/messages';
+	import { getLocale } from '$lib/paraglide/runtime';
+
+	// the URL decides the locale, so re-read it on navigation
+	let current = $derived.by(() => {
+		void $page.url.pathname;
+		return getLocale();
+	});
+
+	let open = $state(false);
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger
+		class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border/70 px-3 text-xs font-semibold text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground"
+		aria-label={m.language_label()}
+		title={m.language_label()}
+	>
+		<!-- globe -->
+		<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+			<circle cx="12" cy="12" r="9" />
+			<path d="M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18Z" />
+		</svg>
+		<span class="uppercase">{current}</span>
+	</Popover.Trigger>
+	<Popover.Content align="end" class="w-56 border-border">
+		<LanguageOptions onSelect={() => (open = false)} />
+	</Popover.Content>
+</Popover.Root>

src/lib/components/localized-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import { getLocale } from '$lib/paraglide/runtime';
+
+	import type { Component } from 'svelte';
+
+	/**
+	 * Picks the content component for the current locale.
+	 *
+	 * Long-form pages (about, imprint, privacy, terms) are kept as one component
+	 * per language rather than as message strings: the prose is full of inline
+	 * links, lists and headings, and splitting that into placeholders makes both
+	 * the source and the translations harder to read and to keep correct.
+	 */
+	interface Props {
+		variants: Record<string, Component>;
+	}
+
+	let { variants }: Props = $props();
+
+	let Content = $derived.by(() => {
+		// the URL decides the locale, so re-resolve on navigation
+		void $page.url.pathname;
+		return variants[getLocale()] ?? variants.en;
+	});
+</script>
+
+<Content />

src/lib/components/location/location-search.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy } from 'svelte';
+	import { createEventDispatcher, onDestroy, tick } from 'svelte';
 
-	import { type GeoLocation } from '$lib/stores/settings';
+	import {
+		type GeoLocation,
+		locationKey,
+		storedFavoriteLocations,
+		storedRecentLocations
+	} from '$lib/stores/settings';
 
 	import * as Alert from '$lib/components/ui/alert';
 	import { Button } from '$lib/components/ui/button';
-	import * as Dialog from '$lib/components/ui/dialog';
 	import { Input } from '$lib/components/ui/input';
+	import * as Popover from '$lib/components/ui/popover';
 
-	export let label: string = 'Search Locations...';
+	import * as m from '$lib/paraglide/messages';
+
+	export let label: string = 'Search location...';
 	export let placeholder: string = 'Enter city name...';
 
 	interface ResultSet {
@@ -18,26 +25,58 @@
 	const dispatch = createEventDispatcher();
 	let debounceTimeout: ReturnType<typeof setTimeout> | undefined;
 	let searchQuery = '';
+	let popoverOpen = false;
+	let searchInputEl: HTMLInputElement | null = null;
 
 	onDestroy(() => {
-		clearInterval(debounceTimeout);
+		clearTimeout(debounceTimeout);
 	});
 
-	let scrollY: number | undefined;
+	const closePopover = () => {
-
+		popoverOpen = false;
-	const closeModal = () => {
-		dialogOpen = false;
-		if (scrollY) {
-			window.scrollTo({ top: scrollY, behavior: 'instant' });
-		}
 	};
 
 	const selectLocation = (location: GeoLocation) => {
+		addRecent(location);
 		searchQuery = '';
-		closeModal();
+		closePopover();
 		dispatch('location', location);
 	};
 
+	function addRecent(loc: GeoLocation) {
+		const key = locationKey(loc);
+		storedRecentLocations.update((list) =>
+			[loc, ...list.filter((l) => locationKey(l) !== key)].slice(0, 8)
+		);
+	}
+
+	/** Drop a single entry from the recent list (favourites are unaffected). */
+	function removeRecent(loc: GeoLocation) {
+		const key = locationKey(loc);
+		storedRecentLocations.update((list) => list.filter((l) => locationKey(l) !== key));
+	}
+
+	function toggleFavorite(loc: GeoLocation) {
+		const key = locationKey(loc);
+		storedFavoriteLocations.update((list) =>
+			list.some((l) => locationKey(l) === key)
+				? list.filter((l) => locationKey(l) !== key)
+				: [loc, ...list].slice(0, 24)
+		);
+	}
+
+	$: favKeys = new Set($storedFavoriteLocations.map(locationKey));
+	$: recentToShow = $storedRecentLocations.filter((l) => !favKeys.has(locationKey(l)));
+
+	async function focusInput() {
+		await tick();
+		searchInputEl?.focus();
+	}
+
+	$: if (popoverOpen) {
+		focusInput();
+	}
+
 	$: results = (async () => {
 		if (debounceTimeout) {
 			clearTimeout(debounceTimeout);
@@ -58,17 +97,19 @@
 			return {
 				results: [
 					{
-						id: 100000000 + Math.floor(latitude * 100 + longitude + 1000),
+						// coordinate-only location: id 0 + COORD makes
+						// buildLocationRoute emit a "52.52N13.41E" route
+						id: 0,
 						name: `GPS ${latitude.toFixed(2)}°N ${longitude.toFixed(2)}°E`,
 						latitude: latitude,
 						longitude: longitude,
-						elevation: position.coords.altitude ?? NaN,
+						elevation: position.coords.altitude ?? 0,
-						feature_code: '',
+						feature_code: 'COORD',
 						country_code: undefined,
 						admin1_id: undefined,
 						admin3_id: undefined,
 						admin4_id: undefined,
-						timezone: '',
+						timezone: 'UTC',
 						population: undefined,
 						postcodes: undefined,
 						country_id: undefined,
@@ -91,70 +132,120 @@
 
 		return (await result.json()) as ResultSet;
 	})();
-
-	let dialogOpen = false;
 </script>
 
-<Dialog.Root bind:open={dialogOpen}>
+{#snippet locationRow(location: GeoLocation, removable: boolean)}
-	<Dialog.Trigger
+	{@const fav = favKeys.has(locationKey(location))}
-		class="group flex h-14 w-full cursor-pointer items-center justify-start rounded-xl border-2 border-gray-200 bg-white px-6 transition-all duration-200 hover:border-blue-400 hover:shadow-md focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-700"
+	<div
-		onclick={(e) => {
+		class="group flex items-center rounded-md border border-transparent transition-[background,border-color] duration-150 hover:border-border hover:bg-accent"
-			e.preventDefault();
+	>
-			dialogOpen = !dialogOpen;
+		<button
-		}}
+			class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-left"
+			onclick={() => selectLocation(location)}
+		>
+			<img
+				class="h-7 w-7 shrink-0 rounded-full"
+				src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
+				alt={location.country}
+			/>
+			<div class="min-w-0 flex-1">
+				<div class="truncate text-sm font-medium text-foreground">{location.name}</div>
+				<div class="truncate text-xs text-muted-foreground">
+					{location.admin1 || ''}
+					{location.country || ''}
+					· {location.latitude.toFixed(2)}°N {location.longitude.toFixed(2)}°E
+					{#if location.elevation}· {location.elevation.toFixed(0)}m{/if}
+				</div>
+			</div>
+		</button>
+		<button
+			class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-background hover:text-amber-500 {fav
+				? 'text-amber-500'
+				: 'text-muted-foreground/50'}"
+			onclick={() => toggleFavorite(location)}
+			aria-label={fav ? m.search_favorite_remove() : m.search_favorite_add()}
+			title={fav ? m.search_favorite_remove() : m.search_favorite_add()}
 		>
 			<svg
-			class="mr-3 h-5 w-5 text-gray-400 transition-colors group-hover:text-blue-500"
+				class="h-4 w-4"
+				viewBox="0 0 24 24"
+				fill={fav ? 'currentColor' : 'none'}
+				stroke="currentColor"
+				stroke-width="1.75"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M12 3.6l2.5 5.1 5.6.8-4 3.9 1 5.6-5.1-2.7-5 2.7 1-5.6-4-3.9 5.5-.8z"
+				/>
+			</svg>
+		</button>
+		{#if removable}
+			<button
+				class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/50 hover:bg-background hover:text-destructive"
+				onclick={() => removeRecent(location)}
+				aria-label={m.search_remove_recent({ location: location.name })}
+				title={m.search_remove_recent_short()}
+			>
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+					<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+				</svg>
+			</button>
+		{/if}
+	</div>
+{/snippet}
+
+<Popover.Root bind:open={popoverOpen}>
+	<Popover.Trigger
+		class="flex h-10 w-full cursor-pointer items-center gap-2.5 rounded-full border-2 border-primary/30 bg-background px-4 text-[0.8125rem] font-medium text-muted-foreground shadow-xs transition-[border-color,box-shadow] duration-150 hover:border-primary/70 hover:shadow-md"
+	>
+		<svg
+			class="h-4 w-4 shrink-0 text-primary"
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
 			viewBox="0 0 24 24"
 			stroke="currentColor"
+			stroke-width="2"
 		>
 			<circle cx="11" cy="11" r="8" />
 			<path d="m21 21-4.3-4.3" />
 		</svg>
-		<span
+		<span class="overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>
-			class="text-gray-600 transition-colors group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white"
+	</Popover.Trigger>
+
+	<Popover.Content
+		class="popover-dropdown w-(--bits-popover-anchor-width) min-w-[320px] p-0"
+		side="bottom"
+		align="start"
+		sideOffset={4}
+		onOpenAutoFocus={(e) => {
+			e.preventDefault();
+			focusInput();
+		}}
 	>
-			{label}
+		<div class="flex flex-col">
-		</span>
+			<div class="p-3">
-	</Dialog.Trigger>
+				<div class="flex gap-2">
-
-	<Dialog.Portal>
-		<Dialog.Overlay class="bg-black/20 backdrop-blur-sm" />
-
-		<Dialog.Content
-			class="top-[10%] flex max-h-[calc(100vh-10%)] min-h-[500px] translate-y-0 flex-col overflow-hidden rounded-2xl border-border bg-white shadow-2xl sm:max-w-[700px] dark:bg-gray-800"
-		>
-			<Dialog.Header class="pb-6">
-				<Dialog.Title class="text-center text-2xl font-bold">Find Your Location</Dialog.Title>
-				<p class="text-center text-gray-600 dark:text-gray-300">
-					Search for a city or use GPS to detect your location
-				</p>
-			</Dialog.Header>
-
-			<div class="flex-1 overflow-hidden">
-				<div class="px-6">
-					<div class="mb-6 flex gap-3">
 					<div class="flex-1">
 						<Input
 							type="search"
 							{placeholder}
-								class="h-12 text-lg"
+							class="h-9"
 							autocomplete="off"
 							spellcheck="false"
-								aria-label="Search Location"
+							aria-label={m.search_aria()}
 							bind:value={searchQuery}
+							bind:ref={searchInputEl}
 						/>
 					</div>
 					<Button
 						variant="outline"
-							size="lg"
+						size="default"
-							class="px-4"
+						class="h-9 px-2.5"
-							title="Use GPS Location"
+						title={m.search_gps()}
 						onclick={() => (searchQuery = 'GPS')}
 					>
-							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
@@ -172,98 +263,83 @@
 				</div>
 			</div>
 
-				<div class="flex-1 overflow-y-auto px-6 pb-6">
+			<div class="max-h-[min(400px,50vh)] overflow-y-auto px-3 pb-3">
 				{#await results}
-						<div class="flex h-32 items-center justify-center">
+					<div class="flex h-20 items-center justify-center">
-							<div class="flex items-center space-x-3">
+						<div class="flex items-center space-x-2">
-								<div class="h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600"></div>
+							<div class="h-4 w-4 animate-spin rounded-full border-b-2 border-primary"></div>
-								<span class="text-gray-600 dark:text-gray-300">Searching...</span>
+							<span class="text-sm text-muted-foreground">{m.search_searching()}</span>
 						</div>
 					</div>
 				{:then results}
-						{#if results.results && results.results.length === 0}
 					{#if searchQuery.length < 2}
-								<Alert.Root class="border-blue-200 bg-blue-50 dark:bg-blue-900/20">
+						{#if $storedFavoriteLocations.length > 0 || recentToShow.length > 0}
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							{#if $storedFavoriteLocations.length > 0}
-										<path
+								<div
-											stroke-linecap="round"
+									class="mb-1 px-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
-											stroke-linejoin="round"
+								>
-											stroke-width="2"
+									{m.search_favorites()}
-											d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								</div>
-										/>
+								<div class="space-y-0.5">
-									</svg>
+									{#each $storedFavoriteLocations as loc (locationKey(loc))}
-									<Alert.Description class="text-blue-700 dark:text-blue-300">
+										{@render locationRow(loc, false)}
-										Start typing to search for locations or use GPS to detect your current position
+									{/each}
-									</Alert.Description>
+								</div>
-								</Alert.Root>
+							{/if}
-							{:else}
+							{#if recentToShow.length > 0}
-								<Alert.Root class="border-orange-200 bg-orange-50 dark:bg-orange-900/20">
+								<div
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									class="mb-1 px-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase {$storedFavoriteLocations.length
-										<path
+										? 'mt-3'
-											stroke-linecap="round"
+										: ''}"
-											stroke-linejoin="round"
+								>
-											stroke-width="2"
+									{m.search_recent()}
-											d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+								</div>
-										/>
+								<div class="space-y-0.5">
-									</svg>
+									{#each recentToShow as loc (locationKey(loc))}
-									<Alert.Description class="text-orange-700 dark:text-orange-300">
+										{@render locationRow(loc, true)}
-										No locations found for "{searchQuery}". Try a different search term.
+									{/each}
-									</Alert.Description>
+								</div>
-								</Alert.Root>
 							{/if}
-						{:else if !results.results}
-							<Alert.Root variant="destructive">
-								<Alert.Description>No locations found</Alert.Description>
-							</Alert.Root>
 						{:else}
-							<div class="space-y-2">
+							<div
-								{#each results.results || [] as location, i (i)}
+								class="flex items-start gap-2 rounded-md bg-primary/8 p-2.5 text-muted-foreground"
-									<button
-										class="group w-full rounded-xl border border-gray-200 p-4 text-left transition-all duration-200 hover:border-blue-400 hover:bg-blue-50 dark:border-gray-600 dark:hover:bg-blue-900/20"
-										onclick={() => selectLocation(location)}
 							>
-										<div class="flex items-center justify-between">
-											<div class="flex flex-1 items-center space-x-4">
-												<img
-													class="h-10 w-10 rounded-full shadow-md"
-													src="/images/country-flags/{(
-														location.country_code || 'united_nations'
-													).toLowerCase()}.svg"
-													alt={location.country}
-												/>
-												<div class="flex-1">
-													<h3
-														class="font-semibold text-gray-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
-													>
-														{location.name}
-													</h3>
-													<p class="text-sm text-gray-600 dark:text-gray-300">
-														{location.admin1 || ''}
-														{location.country || ''}
-													</p>
-													<p class="text-xs text-gray-500 dark:text-gray-400">
-														{location.latitude?.toFixed(2)}°N {location.longitude?.toFixed(2)}°E
-														{#if location.elevation}• {location.elevation?.toFixed(0)}m{/if}
-													</p>
-												</div>
-											</div>
 								<svg
-												class="h-5 w-5 text-gray-400 group-hover:text-blue-500"
+									class="mt-0.5 h-3.5 w-3.5 shrink-0"
 									fill="none"
 									stroke="currentColor"
 									viewBox="0 0 24 24"
+									stroke-width="2"
 								>
 									<path
 										stroke-linecap="round"
 										stroke-linejoin="round"
-													stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-													d="M9 5l7 7-7 7"
 									/>
 								</svg>
+								<span class="text-xs">
+									{m.search_hint()}
+								</span>
 							</div>
-									</button>
+						{/if}
+					{:else if results.results && results.results.length > 0}
+						<div class="space-y-0.5">
+							{#each results.results as location, i (i)}
+								{@render locationRow(location, false)}
 							{/each}
 						</div>
+					{:else if results.results}
+						<Alert.Root
+							class="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-900/20"
+						>
+							<Alert.Description class="text-orange-700 dark:text-orange-300">
+								No locations found for "{searchQuery}". Try a different term.
+							</Alert.Description>
+						</Alert.Root>
+					{:else}
+						<Alert.Root variant="destructive">
+							<Alert.Description>{m.search_no_results()}</Alert.Description>
+						</Alert.Root>
 					{/if}
 				{:catch error}
 					<Alert.Root variant="destructive">
@@ -272,6 +348,5 @@
 				{/await}
 			</div>
 		</div>
-		</Dialog.Content>
+	</Popover.Content>
-	</Dialog.Portal>
+</Popover.Root>
-</Dialog.Root>

src/lib/components/navigation/footer.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { href } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
+
+	import LogoMark from './logo-mark.svelte';
+
+	// A hand-picked set of the prerendered city pages (see
+	// routes/weather/locations/city-names100.json) — instant navigation targets
+	// that double as SEO entry points.
+	const popularCities: { slug: string; label: string }[] = [
+		{ slug: 'london', label: 'London' },
+		{ slug: 'tokyo', label: 'Tokyo' },
+		{ slug: 'berlin', label: 'Berlin' },
+		{ slug: 'sydney', label: 'Sydney' },
+		{ slug: 'singapore', label: 'Singapore' },
+		{ slug: 'dubai', label: 'Dubai' },
+		{ slug: 'los-angeles', label: 'Los Angeles' },
+		{ slug: 'hong-kong', label: 'Hong Kong' },
+		{ slug: 'istanbul', label: 'Istanbul' },
+		{ slug: 'seoul', label: 'Seoul' },
+		{ slug: 'mexico-city', label: 'Mexico City' },
+		{ slug: 'sao-paulo', label: 'São Paulo' }
+	];
+
+	const forecastLinks = [
+		{ href: href('/weather/week'), label: m.nav_week() },
+		{ href: href('/weather/compare'), label: m.nav_compare() },
+		{ href: href('/weather/14-day'), label: m.nav_14day() },
+		{ href: href('/weather/seasonal'), label: m.page_seasonal_subtitle() },
+		{ href: href('/weather/historical'), label: m.page_historical_subtitle() },
+		{ href: href('/weather/maps'), label: m.nav_maps() }
+	];
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer class="mt-16 border-t border-border bg-card/60">
+	<div class="mx-auto w-full max-w-[1536px] px-4 py-10 lg:px-8">
+		<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+			<!-- Brand -->
+			<div class="max-w-xs">
+				<div class="flex items-center gap-2">
+					<span
+						class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"
+					>
+						<LogoMark />
+					</span>
+					<span class="text-lg font-bold tracking-tight">Drizz.li</span>
+				</div>
+				<p class="mt-3 text-sm leading-relaxed text-muted-foreground">
+					{m.footer_tagline()}
+				</p>
+				<p class="mt-3 text-xs text-muted-foreground">
+					{m.footer_data_by()}
+					<a
+						class="font-medium underline-offset-2 hover:text-foreground hover:underline"
+						href="https://open-meteo.com"
+						target="_blank"
+						rel="noopener noreferrer">Open-Meteo</a
+					>
+				</p>
+			</div>
+
+			<!-- Forecasts -->
+			<nav aria-label={m.footer_forecasts()}>
+				<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
+					{m.footer_forecasts()}
+				</h3>
+				<ul class="mt-3 flex flex-col gap-2 text-sm">
+					{#each forecastLinks as link (link.href)}
+						<li>
+							<a
+								class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
+								href={link.href}>{link.label}</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+
+			<!-- Popular locations (spans two columns of links) -->
+			<nav aria-label={m.footer_popular()} class="lg:col-span-2">
+				<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
+					{m.footer_popular()}
+				</h3>
+				<ul class="mt-3 grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
+					{#each popularCities as city (city.slug)}
+						<li>
+							<a
+								class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
+								href={href('/weather/week/[location]', { location: city.slug })}
+								>{m.city_weather({ city: city.label })}</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+		</div>
+
+		<!-- Bottom bar: legal -->
+		<div
+			class="mt-10 flex flex-col items-start justify-between gap-3 border-t border-border/70 pt-5 text-xs text-muted-foreground sm:flex-row sm:items-center"
+		>
+			<span>© {year} Drizz.li</span>
+			<nav aria-label={m.legal_nav()} class="flex flex-wrap items-center gap-x-5 gap-y-1">
+				<a class="underline-offset-2 hover:text-foreground hover:underline" href={href('/about')}
+					>{m.legal_about()}</a
+				>
+				<a
+					class="underline-offset-2 hover:text-foreground hover:underline"
+					href={href('/legal/imprint')}>{m.legal_imprint()}</a
+				>
+				<a
+					class="underline-offset-2 hover:text-foreground hover:underline"
+					href={href('/legal/privacy')}>{m.legal_privacy()}</a
+				>
+				<a
+					class="underline-offset-2 hover:text-foreground hover:underline"
+					href={href('/legal/terms')}>{m.legal_terms()}</a
+				>
+			</nav>
+		</div>
+	</div>
+</footer>

src/lib/components/navigation/header.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	import { type GeoLocation, type Theme, storedLocation, storedTheme } from '$lib/stores/settings';
+
+	import { buildLocationRoute } from '$lib/utils/location';
+
+	import LanguageSelector from '$lib/components/language-selector.svelte';
+	import LocationSearch from '$lib/components/location/location-search.svelte';
+	import UnitSelector from '$lib/components/unit-selector.svelte';
+
+	import { href, routePath } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
+	import SupporterBadge from '$lib/paywall/SupporterBadge.svelte';
+
+	import SettingsMenu from './settings-menu.svelte';
+	import ThemeIcon from './theme-icon.svelte';
+
+	interface Props {
+		onMenuToggle?: () => void;
+	}
+
+	let { onMenuToggle }: Props = $props();
+
+	let location = $state(get(storedLocation));
+
+	storedLocation.subscribe((value) => {
+		location = value;
+	});
+
+	// Prerendered pages bake the DEFAULT location's flag into the HTML, and
+	// Svelte's hydration repairs text but not attributes — so on pages that
+	// never update the store (legal pages etc.) the stale flag would stick
+	// around next to the correct location name. Re-sync the src after mount.
+	let flagEl = $state<HTMLImageElement>();
+	$effect(() => {
+		const src = `/images/country-flags/${(location.country_code || 'united_nations').toLowerCase()}.svg`;
+		if (flagEl && !flagEl.src.endsWith(src)) flagEl.src = src;
+	});
+
+	const themeCycle: Theme[] = ['system', 'light', 'dark'];
+	const themeTitles: Record<Theme, () => string> = {
+		system: m.theme_follow_system,
+		light: m.theme_light_title,
+		dark: m.theme_dark_title
+	};
+
+	function cycleTheme() {
+		storedTheme.update(
+			(current) => themeCycle[(themeCycle.indexOf(current) + 1) % themeCycle.length]
+		);
+	}
+
+	function navigateToLocation(newLocation: GeoLocation) {
+		storedLocation.set(newLocation);
+		const locationRoute = buildLocationRoute(newLocation);
+		const currentPath = routePath(get(page).url.pathname);
+
+		if (currentPath.startsWith('/weather/compare')) {
+			goto(href('/weather/compare/[location]', { location: locationRoute }));
+		} else if (currentPath.startsWith('/weather/14-day')) {
+			goto(href('/weather/14-day/[location]', { location: locationRoute }));
+		} else if (currentPath.startsWith('/weather/historical')) {
+			goto(href('/weather/historical/[location]', { location: locationRoute }));
+		} else if (currentPath.startsWith('/weather/seasonal')) {
+			goto(href('/weather/seasonal/[location]', { location: locationRoute }));
+		} else {
+			goto(href('/weather/week/[location]', { location: locationRoute }));
+		}
+	}
+</script>
+
+<header
+	class="topbar flex h-14 shrink-0 items-center gap-3 border-b border-topbar-border bg-topbar px-3 md:px-4"
+>
+	<!-- Mobile menu toggle. On phones this side and the settings side both take
+	     an equal share of the leftover width, which lands the search box dead
+	     centre; on md+ they collapse and the spacer below does the work. -->
+	<div class="flex flex-1 items-center md:flex-none">
+		<button
+			class="-ms-1 flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground md:hidden"
+			onclick={onMenuToggle}
+			aria-label={m.nav_toggle_menu()}
+		>
+			<svg
+				class="h-5 w-5"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				stroke-width="1.75"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Current location display -->
+	{#if location}
+		<div
+			class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex"
+		>
+			<img
+				bind:this={flagEl}
+				class="h-6 w-6 shrink-0 rounded-full ring-1 ring-border"
+				src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
+				alt={location.country}
+			/>
+			<!-- full location (desktop); the page hero carries it on smaller screens -->
+			<span class="whitespace-nowrap text-sm font-semibold text-foreground">
+				{location.name}
+				{#if location.admin1 || location.country}
+					<span class="font-normal text-muted-foreground">
+						· {#if location.admin1}{location.admin1},&nbsp;
+						{/if}{location.country ?? ''}
+					</span>
+				{/if}
+			</span>
+		</div>
+	{/if}
+
+	<!-- Spacer (md+ only: on phones the equal side columns centre the search) -->
+	<div class="hidden flex-1 md:block"></div>
+
+	<!-- Location search: primary way to switch places, so keep it loud -->
+	<div class="w-full max-w-sm md:max-w-md">
+		<LocationSearch
+			label={m.search_placeholder()}
+			on:location={(event) => {
+				navigateToLocation(event.detail);
+			}}
+		/>
+	</div>
+
+	<!-- Phones only have room for one control, so units, theme and supporter
+	     status collapse into a single settings menu below md. This side mirrors
+	     the menu-button column so the search lands dead centre. -->
+	<div class="flex flex-1 justify-end md:hidden">
+		<SettingsMenu />
+	</div>
+
+	<!-- md+: the same settings as individual controls. Kept mounted (not `{#if}`)
+	     so SupporterBadge still verifies the key on every viewport. -->
+	<div class="hidden items-center gap-3 md:flex">
+		<!-- Supporter status / unlock -->
+		<SupporterBadge />
+
+		<!-- Language: the locale lives in the URL, so this is a set of links -->
+		<LanguageSelector />
+
+		<!-- Measurement units -->
+		<UnitSelector />
+
+		<!-- Theme toggle: system → light → dark -->
+		<button
+			class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+			onclick={cycleTheme}
+			title={themeTitles[$storedTheme]()}
+			aria-label={themeTitles[$storedTheme]()}
+		>
+			<ThemeIcon theme={$storedTheme} />
+		</button>
+	</div>
+</header>
+
+<style>
+	.topbar {
+		z-index: 40;
+	}
+</style>

src/lib/components/navigation/logo-mark.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	// umbrella-with-rain mark (matches the favicon); shared by the sidebar home
+	// link and the footer so the brand reads the same in both places
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-5 w-5' }: Props = $props();
+</script>
+
+<svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+	<!-- rain falls from above onto the canopy -->
+	<path stroke-linecap="round" d="M4.5 3v.01M19.5 3v.01M8.5 1.5v.01M15.5 2.5v.01" />
+	<path stroke-linecap="round" d="M12 4.5V6" />
+	<path
+		fill="currentColor"
+		stroke="none"
+		d="M4 14a8 8 0 0 1 16 0c-.66-1-1.99-1-2.66 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0C8.66 13 7.33 13 6.66 14 6 13 4.66 13 4 14Z"
+	/>
+	<path stroke-linecap="round" d="M12 14v5a1.9 1.9 0 0 1-3.8 0" />
+</svg>

src/lib/components/navigation/settings-menu.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { type Theme, storedTheme } from '$lib/stores/settings';
+
+	import LanguageOptions from '$lib/components/language-options.svelte';
+	import * as Popover from '$lib/components/ui/popover';
+	import UnitOptions from '$lib/components/unit-options.svelte';
+
+	import * as m from '$lib/paraglide/messages';
+	import SupporterIcon from '$lib/paywall/SupporterIcon.svelte';
+	import UnlockDialog from '$lib/paywall/UnlockDialog.svelte';
+	import { isSupporter } from '$lib/paywall/supporter';
+
+	import ThemeIcon from './theme-icon.svelte';
+
+	// The topbar has room for one control on a phone, so units, theme and the
+	// supporter status share this menu instead of each carrying its own trigger.
+	const THEMES: { value: Theme; label: () => string }[] = [
+		{ value: 'system', label: m.theme_system },
+		{ value: 'light', label: m.theme_light },
+		{ value: 'dark', label: m.theme_dark }
+	];
+
+	let open = $state(false);
+	let unlockOpen = $state(false);
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger
+		class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground"
+		aria-label={m.settings_title()}
+		title={m.settings_title()}
+	>
+		<!-- gear -->
+		<svg
+			class="h-4.5 w-4.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			stroke-width="1.75"
+		>
+			<circle cx="12" cy="12" r="3" />
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2v.2a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"
+			/>
+		</svg>
+	</Popover.Trigger>
+
+	<Popover.Content align="end" class="w-72 border-border">
+		<div class="flex flex-col gap-4">
+			<UnitOptions />
+
+			<div>
+				<span
+					class="mb-1.5 block text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
+				>
+					{m.theme_label()}
+				</span>
+				<div class="flex gap-1 rounded-lg bg-muted p-0.5">
+					{#each THEMES as option (option.value)}
+						{@const active = $storedTheme === option.value}
+						<button
+							class="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-[13px] font-semibold transition-colors {active
+								? 'bg-background text-foreground shadow-sm'
+								: 'text-muted-foreground hover:text-foreground'}"
+							aria-pressed={active}
+							onclick={() => storedTheme.set(option.value)}
+						>
+							<ThemeIcon theme={option.value} class="h-4 w-4" />
+							{option.label()}
+						</button>
+					{/each}
+				</div>
+			</div>
+
+			<LanguageOptions onSelect={() => (open = false)} />
+
+			<div class="border-t border-border/70 pt-3">
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left transition-colors hover:bg-muted"
+					onclick={() => {
+						open = false;
+						unlockOpen = true;
+					}}
+				>
+					<SupporterIcon
+						filled={$isSupporter}
+						class="h-4.5 w-4.5 shrink-0 {$isSupporter ? 'text-amber-500' : 'text-muted-foreground'}"
+					/>
+					<span class="min-w-0 flex-1">
+						<span class="block text-[13px] font-semibold">
+							{$isSupporter ? m.supporter_active() : m.supporter_support()}
+						</span>
+						<span class="block text-[11px] text-muted-foreground">
+							{$isSupporter ? m.supporter_manage_key() : m.supporter_unlock()}
+						</span>
+					</span>
+				</button>
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>
+
+<UnlockDialog bind:open={unlockOpen} />

src/lib/components/navigation/theme-icon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Theme } from '$lib/stores/settings';
+
+	interface Props {
+		theme: Theme;
+		class?: string;
+	}
+
+	let { theme, class: className = 'h-4.5 w-4.5' }: Props = $props();
+</script>
+
+{#if theme === 'light'}
+	<!-- sun -->
+	<svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+		<circle cx="12" cy="12" r="4" />
+		<path
+			stroke-linecap="round"
+			d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32 1.41-1.41"
+		/>
+	</svg>
+{:else if theme === 'dark'}
+	<!-- moon -->
+	<svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"
+		/>
+	</svg>
+{:else}
+	<!-- monitor (system) -->
+	<svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
+		<rect x="3" y="4" width="18" height="13" rx="2" />
+		<path stroke-linecap="round" d="M8 21h8m-4-4v4" />
+	</svg>
+{/if}

src/lib/components/navigation/weather-nav.svelte

@@ -1,143 +1,216 @@
 <script lang="ts">
-	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
 
-	import { Button } from '$lib/components/ui/button';
+	import { storedLocation } from '$lib/stores/settings';
+
+	import { buildLocationRoute } from '$lib/utils/location';
+
+	import { href, routePath } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
+
+	import LogoMark from './logo-mark.svelte';
+
+	interface Props {
+		collapsed?: boolean;
+		onToggle?: () => void;
+		onMobileClose?: () => void;
+	}
+
+	let { collapsed = false, onToggle, onMobileClose }: Props = $props();
 
 	const links = [
 		{
-			title: 'Current Weather',
+			title: m.nav_week,
-			url: '/weather/week',
+			url: '/weather/week' as const,
-			description: 'Current conditions and overview',
+			route: '/weather/week/[location]' as const,
-			icon: '🌡️'
+			iconPaths: [
+				'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'
+			]
 		},
 		{
-			title: 'Model Comparison',
+			title: m.nav_compare,
-			url: '/weather/compare',
+			url: '/weather/compare' as const,
-			description: 'Compare multiple weather models',
+			route: '/weather/compare/[location]' as const,
-			icon: '📊'
+			iconPaths: ['M13 7h8m0 0v8m0-8l-8 8-4-4-6 6']
 		},
 		{
-			title: '14 Day Forecast',
+			title: m.nav_14day,
-			url: '/weather/14-day',
+			url: '/weather/14-day' as const,
-			description: 'Extended forecast with uncertainty',
+			route: '/weather/14-day/[location]' as const,
-			icon: '📅'
+			iconPaths: [
+				'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z'
+			]
+		},
+		{
+			title: m.nav_seasonal,
+			url: '/weather/seasonal' as const,
+			route: '/weather/seasonal/[location]' as const,
+			// rising trend line (long-range outlook)
+			iconPaths: ['M3 17l6-6 4 4 7-7', 'M16 8h5v5']
+		},
+		{
+			title: m.nav_historical,
+			url: '/weather/historical' as const,
+			route: '/weather/historical/[location]' as const,
+			// clock with a counter-clockwise arrow (history)
+			iconPaths: ['M12 8v4l3 2', 'M3.5 9a9 9 0 1 0 2.2-3.6L3 8m0-4.5V8h4.5']
+		},
+		{
+			title: m.nav_maps,
+			url: '/weather/maps' as const,
+			// Heroicons "map" outline icon
+			iconPaths: [
+				'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7'
+			]
 		}
 	];
 
-	let mobileNavOpened = $state(false);
+	// the URL carries a locale prefix; compare the neutral path behind it
-	let currentPath = $derived($page.url.pathname);
+	let currentPath = $derived(routePath($page.url.pathname));
+
+	// Link straight to the location page instead of the bare redirect route: it
+	// saves a navigation, and the page cross-fade can then wait for the real
+	// page's data instead of flashing through an empty redirect stub.
+	let locationRoute = $derived(buildLocationRoute($storedLocation));
 
 	const isActive = (url: string) => {
 		return currentPath === url || currentPath.startsWith(url + '/');
 	};
 </script>
 
-<nav
+<aside
-	class="sticky top-0 z-50 border-b border-gray-200/50 bg-white/90 shadow-sm backdrop-blur-lg dark:border-gray-700/50 dark:bg-gray-900/90"
+	class="flex h-full flex-col border-r border-sidebar-border bg-sidebar transition-all duration-200"
+	class:w-55={!collapsed}
+	class:w-14={collapsed}
 >
-	<div class="container mx-auto px-6">
+	<!-- Sidebar header: same height as the topbar so the borders align; the
-		<div class="flex h-16 items-center justify-between">
+	     home link fills the entire row, padding included -->
-			<!-- Logo -->
+	<div class="flex h-14 shrink-0 items-stretch border-b border-sidebar-border">
-			<div class="flex items-center space-x-3">
-				<div class="rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 p-2">
-					<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
-						/>
-					</svg>
-				</div>
 		<a
-					href={resolve('/')}
+			href={href('/weather/week/[location]', { location: locationRoute })}
-					class="text-xl font-bold text-gray-900 transition-colors hover:text-blue-600 dark:text-white"
+			class="flex flex-1 items-center gap-2.5 transition-colors hover:bg-sidebar-accent {collapsed
+				? 'justify-center'
+				: 'px-4'}"
+			onclick={onMobileClose}
+			aria-label={m.nav_home()}
 		>
-					Open-Meteo Weather
+			<div
+				class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
+			>
+				<LogoMark />
+			</div>
+			{#if !collapsed}
+				<span class="text-sm font-bold tracking-tight whitespace-nowrap text-sidebar-foreground">
+					Drizz.li
+				</span>
+			{/if}
 		</a>
 	</div>
 
-			<!-- Desktop Navigation -->
+	<!-- Navigation links -->
-			<div class="hidden items-center space-x-2 md:flex">
+	<nav class="flex-1 space-y-1 px-2 py-3">
-				{#each links as link (link.title)}
+		{#each links as link (link.url)}
-					<Button
+			{@const active = isActive(link.url)}
-						href={link.url}
+			<a
-						variant={isActive(link.url) ? 'default' : 'ghost'}
+				href={link.route ? href(link.route, { location: locationRoute }) : href(link.url)}
-						size="sm"
+				class="relative flex items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100 {active
-						class="group relative px-4 py-2 {isActive(link.url)
+					? 'bg-sidebar-accent text-sidebar-primary! opacity-100! font-semibold! nav-active'
-							? 'bg-blue-600 text-white shadow-md'
+					: ''}"
-							: 'hover:bg-blue-50 dark:hover:bg-blue-900/20'}"
+				title={collapsed ? link.title() : undefined}
+				onclick={onMobileClose}
 			>
-						<span class="mr-1">{link.icon}</span>
+				<div class="flex h-5 w-5 shrink-0 items-center justify-center">
-						{link.title}
+					<svg
-					</Button>
+						class="h-4.5 w-4.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="1.75"
+					>
+						{#each link.iconPaths as d (d)}
+							<path stroke-linecap="round" stroke-linejoin="round" {d} />
 						{/each}
-			</div>
-
-			<!-- Mobile menu button -->
-			<div class="md:hidden">
-				<Button
-					variant="ghost"
-					size="sm"
-					class="rounded-lg"
-					onclick={() => (mobileNavOpened = !mobileNavOpened)}
-				>
-					<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						{#if mobileNavOpened}
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						{:else}
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 6h16M4 12h16M4 18h16"
-							/>
-						{/if}
 					</svg>
-				</Button>
 				</div>
-		</div>
+				{#if !collapsed}
-
+					<span class="ml-2.5 whitespace-nowrap">{link.title()}</span>
-		<!-- Mobile Navigation -->
+				{/if}
-		{#if mobileNavOpened}
+			</a>
-			<div class="border-t border-gray-200 py-4 md:hidden dark:border-gray-700">
-				<div class="space-y-2">
-					{#each links as link (link.title)}
-						<Button
-							href={link.url}
-							variant={isActive(link.url) ? 'default' : 'ghost'}
-							class="w-full justify-start py-3 {isActive(link.url) ? 'bg-blue-600 text-white' : ''}"
-							onclick={() => (mobileNavOpened = false)}
-						>
-							<div class="flex items-center space-x-3">
-								<span class="text-lg">{link.icon}</span>
-								<div class="text-left">
-									<div class="font-medium">{link.title}</div>
-									<div
-										class="text-xs {isActive(link.url)
-											? 'text-blue-100'
-											: 'text-gray-500 dark:text-gray-400'}"
-									>
-										{link.description}
-									</div>
-								</div>
-							</div>
-						</Button>
 		{/each}
+	</nav>
+
+	<!-- On phones the footer sits a long scroll away, so the same about/legal
+	     links get a quiet home at the bottom of the drawer. -->
+	{#if onMobileClose}
+		<nav
+			aria-label={m.legal_nav()}
+			class="flex flex-wrap gap-x-3 gap-y-1 border-t border-sidebar-border px-4 py-3 text-[11px] text-sidebar-foreground/70"
+		>
+			<a
+				class="hover:text-sidebar-foreground hover:underline"
+				href={href('/about')}
+				onclick={onMobileClose}>{m.legal_about()}</a
+			>
+			<a
+				class="hover:text-sidebar-foreground hover:underline"
+				href={href('/legal/imprint')}
+				onclick={onMobileClose}>{m.legal_imprint()}</a
+			>
+			<a
+				class="hover:text-sidebar-foreground hover:underline"
+				href={href('/legal/privacy')}
+				onclick={onMobileClose}>{m.legal_privacy()}</a
+			>
+			<a
+				class="hover:text-sidebar-foreground hover:underline"
+				href={href('/legal/terms')}
+				onclick={onMobileClose}>{m.legal_terms()}</a
+			>
+		</nav>
+	{/if}
+
+	<!-- Collapse toggle (desktop sidebar only; the mobile drawer omits onToggle) -->
+	{#if onToggle}
+		<div class="border-t border-sidebar-border px-2 py-3">
+			<button
+				class="relative flex w-full cursor-pointer items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100"
+				onclick={onToggle}
+				title={collapsed ? m.nav_expand_sidebar() : m.nav_collapse_sidebar()}
+			>
+				<div class="flex h-5 w-5 shrink-0 items-center justify-center">
+					<svg
+						class="h-4.5 w-4.5 transition-transform duration-200"
+						class:rotate-180={collapsed}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="1.75"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+						/>
+					</svg>
 				</div>
+				{#if !collapsed}
+					<span class="ml-2.5 whitespace-nowrap">{m.nav_collapse()}</span>
+				{/if}
+			</button>
 		</div>
 	{/if}
-	</div>
+</aside>
-</nav>
 
 <style>
-	:global(.container) {
+	.nav-active::before {
-		max-width: 1200px;
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 3px;
+		height: 60%;
+		border-radius: 0 3px 3px 0;
+		background: var(--sidebar-primary);
 	}
 </style>

src/lib/components/prose-page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		/** Optional muted line under the title (e.g. "Last updated ..."). */
+		subtitle?: string;
+		children: Snippet;
+	}
+
+	let { title, subtitle, children }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{title} · Drizz.li</title>
+</svelte:head>
+
+<article class="mx-auto max-w-3xl py-2 lg:py-4">
+	<h1 class="text-2xl font-bold tracking-tight lg:text-3xl">{title}</h1>
+	{#if subtitle}
+		<p class="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>
+	{/if}
+	<div class="prose-body mt-6">
+		{@render children()}
+	</div>
+</article>
+
+<style>
+	/* Lightweight typography for long-form pages (about / legal), themed with the
+	   app tokens so it reads correctly in light and dark. */
+	.prose-body {
+		line-height: 1.65;
+		font-size: 0.95rem;
+	}
+	.prose-body :global(h2) {
+		margin: 2rem 0 0.6rem;
+		font-size: 1.15rem;
+		font-weight: 700;
+		letter-spacing: -0.01em;
+	}
+	.prose-body :global(h3) {
+		margin: 1.4rem 0 0.4rem;
+		font-size: 1rem;
+		font-weight: 600;
+	}
+	.prose-body :global(p) {
+		margin: 0.6rem 0;
+	}
+	.prose-body :global(ul) {
+		margin: 0.6rem 0;
+		padding-left: 1.4rem;
+	}
+	.prose-body :global(li) {
+		margin: 0.25rem 0;
+	}
+	.prose-body :global(a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.prose-body :global(strong) {
+		font-weight: 600;
+	}
+	.prose-body :global(address) {
+		font-style: normal;
+		margin: 0.6rem 0;
+		padding: 0.8rem 1rem;
+		border: 1px solid var(--border);
+		border-radius: 0.625rem;
+		background: var(--card);
+	}
+	.prose-body :global(hr) {
+		margin: 2rem 0;
+		border: 0;
+		border-top: 1px solid var(--border);
+	}
+</style>

src/lib/components/ui/button/button.svelte

@@ -6,7 +6,7 @@
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',

src/lib/components/ui/dialog/dialog-content.svelte

@@ -22,6 +22,26 @@
 		children: Snippet;
 		showCloseButton?: boolean;
 	} = $props();
+
+	// Keep the (fixed, layout-viewport-centered) dialog centered within the
+	// VISUAL viewport, so the mobile keyboard shifts it up instead of covering it.
+	let kbShift = $state(0);
+	$effect(() => {
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const update = () => {
+			const visualCenter = vv.offsetTop + vv.height / 2;
+			// negative when the keyboard eats the bottom → moves the dialog up
+			kbShift = Math.min(0, visualCenter - window.innerHeight / 2);
+		};
+		update();
+		vv.addEventListener('resize', update);
+		vv.addEventListener('scroll', update);
+		return () => {
+			vv.removeEventListener('resize', update);
+			vv.removeEventListener('scroll', update);
+		};
+	});
 </script>
 
 <DialogPortal {...portalProps}>
@@ -33,6 +53,7 @@
 			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
+		style="margin-top:{kbShift}px;transition:margin-top 0.18s ease"
 		{...restProps}
 	>
 		{@render children?.()}

src/lib/components/ui/popover/index.ts

@@ -0,0 +1,19 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Portal from './popover-portal.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	Portal,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+	Portal as PopoverPortal
+};

src/lib/components/ui/popover/popover-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

src/lib/components/ui/popover/popover-content.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
+
+	import PopoverPortal from './popover-portal.svelte';
+
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

src/lib/components/ui/popover/popover-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />

src/lib/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/utils/ui.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn('', className)}
+	{...restProps}
+/>

src/lib/components/ui/popover/popover.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />

src/lib/components/unit-options.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { type UnitPrefs, storedUnits } from '$lib/stores/settings';
+
+	import * as m from '$lib/paraglide/messages';
+
+	// each group maps a stored unit key to its selectable options
+	const UNIT_GROUPS: {
+		key: keyof UnitPrefs;
+		label: () => string;
+		options: { value: string; label: string }[];
+	}[] = [
+		{
+			key: 'temperature_unit',
+			label: m.unit_temperature,
+			options: [
+				{ value: 'celsius', label: '°C' },
+				{ value: 'fahrenheit', label: '°F' }
+			]
+		},
+		{
+			key: 'wind_speed_unit',
+			label: m.unit_wind_speed,
+			options: [
+				{ value: 'kmh', label: 'km/h' },
+				{ value: 'ms', label: 'm/s' },
+				{ value: 'mph', label: 'mph' },
+				{ value: 'kn', label: 'kn' }
+			]
+		},
+		{
+			key: 'precipitation_unit',
+			label: m.unit_precipitation,
+			options: [
+				{ value: 'mm', label: 'mm' },
+				{ value: 'inch', label: 'inch' }
+			]
+		}
+	];
+
+	function setUnit(key: keyof UnitPrefs, value: string) {
+		storedUnits.update((u) => ({ ...u, [key]: value }));
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	{#each UNIT_GROUPS as group (group.key)}
+		<div>
+			<span
+				class="mb-1.5 block text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
+			>
+				{group.label()}
+			</span>
+			<div class="flex gap-1 rounded-lg bg-muted p-0.5">
+				{#each group.options as opt (opt.value)}
+					{@const active = $storedUnits[group.key] === opt.value}
+					<button
+						class="flex-1 cursor-pointer rounded-md px-2 py-1.5 text-[13px] font-semibold transition-colors {active
+							? 'bg-background text-foreground shadow-sm'
+							: 'text-muted-foreground hover:text-foreground'}"
+						aria-pressed={active}
+						onclick={() => setUnit(group.key, opt.value)}
+					>
+						{opt.label}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/each}
+</div>

src/lib/components/unit-selector.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import * as Popover from '$lib/components/ui/popover';
+	import UnitOptions from '$lib/components/unit-options.svelte';
+
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground"
+		aria-label={m.units_aria()}
+		title={m.units_title()}
+	>
+		<!-- gauge icon -->
+		<svg
+			class="h-4.5 w-4.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			stroke-width="1.75"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M4.5 15a7.5 7.5 0 1 1 15 0M12 15l3.2-3.2"
+			/>
+			<circle cx="12" cy="15" r="1" fill="currentColor" stroke="none" />
+		</svg>
+	</Popover.Trigger>
+	<Popover.Content align="end" class="w-64 border-border">
+		<UnitOptions />
+	</Popover.Content>
+</Popover.Root>

src/lib/i18n.ts

@@ -0,0 +1,81 @@
+/**
+ * Locale-aware routing helpers.
+ *
+ * SvelteKit's `resolve()` returns the language-neutral path a route lives at;
+ * every link has to go through `localizeHref()` on top of that, or clicking it
+ * would drop the visitor back into the base locale (the reroute hook in
+ * `src/hooks.ts` strips the prefix again on the way in).
+ */
+import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
+
+import { type Locale, deLocalizeHref, locales, localizeHref } from '$lib/paraglide/runtime';
+
+import type {
+	PathnameWithSearchOrHash,
+	RouteId,
+	RouteIdWithSearchOrHash,
+	RouteParams
+} from '$app/types';
+
+// Mirrors SvelteKit's own (non-exported) argument type for `resolve`, so a
+// route id still demands exactly the params that route declares.
+type StripSearchOrHash<T extends string> = T extends `${infer P}?${string}`
+	? P
+	: T extends `${infer P}#${string}`
+		? P
+		: T;
+
+type ResolveArgs<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash> = T extends RouteId
+	? RouteParams<T> extends Record<string, never>
+		? [route: T]
+		: [route: T, params: RouteParams<T>]
+	: StripSearchOrHash<T> extends infer U extends RouteId
+		? RouteParams<U> extends Record<string, never>
+			? [route: T]
+			: [route: T, params: RouteParams<U>]
+		: [route: T];
+
+/**
+ * `resolve()` for the current locale. Mirrors SvelteKit's own signature, so
+ * route ids and their params keep being type-checked.
+ */
+export function href<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
+	...args: ResolveArgs<T>
+): string {
+	return localizeHref(resolve(...args));
+}
+
+/** Same as `href`, but forced into a specific locale. */
+export function hrefIn<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
+	locale: Locale,
+	...args: ResolveArgs<T>
+): string {
+	return localizeHref(resolve(...args), { locale });
+}
+
+/** `goto()` that keeps the visitor in their language. */
+export function gotoLocalized<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
+	...args: ResolveArgs<T>
+) {
+	return goto(href(...args));
+}
+
+/**
+ * The language-neutral path for a URL that still carries its locale prefix -
+ * what "which page am I on?" checks have to compare against.
+ */
+export function routePath(pathname: string): string {
+	return deLocalizeHref(pathname);
+}
+
+/** Display names for the language switcher, in the language itself. */
+export const LOCALE_LABELS: Record<Locale, string> = {
+	en: 'English',
+	de: 'Deutsch',
+	es: 'Español',
+	fr: 'Français',
+	it: 'Italiano'
+};
+
+export const LOCALE_LIST = locales;

src/lib/paywall/PaywallGate.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import * as m from '$lib/paraglide/messages';
+
+	import SupporterIcon from './SupporterIcon.svelte';
+	import UnlockDialog from './UnlockDialog.svelte';
+	import { SIGNUP_URL, SUPPORTER_PERKS, getSupporterPrice } from './config';
+	import { isSupporter, refreshSupporter, supporterState } from './supporter';
+
+	interface Props {
+		/** Short feature name shown in the locked panel headline. */
+		feature: string;
+		children: import('svelte').Snippet;
+	}
+
+	let { feature, children }: Props = $props();
+
+	let unlockOpen = $state(false);
+	const price = getSupporterPrice();
+
+	// Re-verify the stored key whenever the gate mounts.
+	onMount(refreshSupporter);
+
+	// Show a brief spinner only when we have no cached answer yet and are checking.
+	let initialChecking = $derived($supporterState.status === 'checking' && !$isSupporter);
+</script>
+
+{#if $isSupporter}
+	{@render children()}
+{:else if initialChecking}
+	<div class="flex items-center justify-center py-24 text-sm text-muted-foreground">
+		<svg class="mr-2 h-4 w-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56" />
+		</svg>
+		{m.supporter_checking()}
+	</div>
+{:else}
+	<div
+		class="mx-auto max-w-xl rounded-2xl border border-border bg-card px-6 py-10 text-center shadow-sm"
+	>
+		<div
+			class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary"
+		>
+			<SupporterIcon class="h-7 w-7" />
+		</div>
+
+		<!-- the feature name comes from a page subtitle ("météo historique"), which is
+	     lowercase mid-sentence and has to be lifted at the start of this one -->
+		<h2 class="text-xl font-bold tracking-tight first-letter:uppercase">
+			{m.supporter_gate_title({ feature })}
+		</h2>
+		<p class="mx-auto mt-1.5 max-w-sm text-sm text-muted-foreground">
+			{m.supporter_gate_body({ price })}
+		</p>
+
+		<ul class="mx-auto mt-5 grid max-w-sm gap-2 text-left">
+			{#each SUPPORTER_PERKS() as perk (perk)}
+				<li class="flex items-start gap-2.5 text-sm">
+					<svg
+						class="mt-0.5 h-4 w-4 shrink-0 text-primary"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="2.5"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
+					</svg>
+					<span>{perk}</span>
+				</li>
+			{/each}
+		</ul>
+
+		<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
+			<a
+				href={SIGNUP_URL}
+				target="_blank"
+				rel="noopener"
+				class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 sm:w-auto"
+			>
+				{m.supporter_become()}
+			</a>
+			<button
+				type="button"
+				class="inline-flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border border-border bg-background px-5 text-sm font-semibold text-foreground transition-colors hover:bg-muted sm:w-auto"
+				onclick={() => (unlockOpen = true)}
+			>
+				{m.supporter_have_key()}
+			</button>
+		</div>
+
+		{#if $supporterState.status === 'invalid'}
+			<p class="mt-4 text-xs text-amber-600 dark:text-amber-400">
+				{m.supporter_key_expired()}
+			</p>
+		{/if}
+	</div>
+{/if}
+
+<UnlockDialog bind:open={unlockOpen} />

src/lib/paywall/SupporterBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import * as m from '$lib/paraglide/messages';
+
+	import SupporterIcon from './SupporterIcon.svelte';
+	import UnlockDialog from './UnlockDialog.svelte';
+	import { isSupporter, refreshSupporter } from './supporter';
+
+	let open = $state(false);
+
+	// Verify once on load so the badge reflects real status site-wide.
+	onMount(refreshSupporter);
+</script>
+
+<button
+	type="button"
+	class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-semibold transition-colors {$isSupporter
+		? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
+		: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
+	onclick={() => (open = true)}
+	title={$isSupporter ? m.supporter_active() : m.supporter_support()}
+	aria-label={$isSupporter ? m.supporter_active() : m.supporter_support()}
+>
+	<SupporterIcon filled={$isSupporter} />
+	<span class="hidden sm:inline">{m.supporter_badge()}</span>
+</button>
+
+<UnlockDialog bind:open />

src/lib/paywall/SupporterIcon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	/**
+	 * The supporter mark. A heart rather than a padlock: nothing here is locked
+	 * away as a punishment - the extras are a thank-you for chipping in, and a
+	 * padlock framed it as a paywall. Filled once someone is supporting,
+	 * outlined as an invitation before that.
+	 */
+	interface Props {
+		filled?: boolean;
+		class?: string;
+	}
+
+	let { filled = false, class: className = 'h-4 w-4' }: Props = $props();
+</script>
+
+{#if filled}
+	<svg class={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+		<path
+			d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
+		/>
+	</svg>
+{:else}
+	<svg
+		class={className}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.9"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path
+			d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
+		/>
+	</svg>
+{/if}

src/lib/paywall/UnlockDialog.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { formatZoned } from '$lib/utils/date';
+
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	import * as m from '$lib/paraglide/messages';
+
+	import { SIGNUP_URL, getSupporterPrice } from './config';
+	import {
+		clearLicense,
+		isSupporter,
+		storedLicenseKey,
+		supporterState,
+		verifyKey
+	} from './supporter';
+
+	interface Props {
+		open?: boolean;
+	}
+
+	let { open = $bindable(false) }: Props = $props();
+
+	const price = getSupporterPrice();
+
+	// Prefill with the stored key so an existing subscriber sees their key.
+	let keyInput = $state('');
+	let submitting = $state(false);
+	let localError = $state<string | null>(null);
+
+	$effect(() => {
+		if (open) {
+			keyInput = $storedLicenseKey;
+			localError = null;
+		}
+	});
+
+	async function submit(e: SubmitEvent) {
+		e.preventDefault();
+		if (submitting) return;
+		submitting = true;
+		localError = null;
+		const result = await verifyKey(keyInput);
+		submitting = false;
+		if (result.valid) {
+			// close shortly so the success state is visible for a beat
+			setTimeout(() => (open = false), 700);
+		} else {
+			localError = result.error ?? m.supporter_key_invalid();
+		}
+	}
+
+	function removeKey() {
+		clearLicense();
+		keyInput = '';
+	}
+
+	let expiresLabel = $derived.by(() => {
+		const exp = $supporterState.expires;
+		if ($supporterState.status !== 'valid') return null;
+		if (!exp) return m.supporter_lifetime();
+		return m.supporter_active_until({ date: formatZoned(new Date(exp), 'UTC', 'd LLL yyyy') });
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>{m.supporter_dialog_title()}</Dialog.Title>
+			<Dialog.Description>
+				{m.supporter_dialog_desc()}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if $isSupporter && $supporterState.status === 'valid'}
+			<div
+				class="flex items-start gap-3 rounded-lg border border-emerald-300/60 bg-emerald-50 px-3.5 py-3 text-sm text-emerald-800 dark:border-emerald-800/50 dark:bg-emerald-950/30 dark:text-emerald-200"
+			>
+				<svg
+					class="mt-0.5 h-5 w-5 shrink-0"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
+					<circle cx="12" cy="12" r="9" />
+				</svg>
+				<div>
+					<p class="font-semibold">{m.supporter_extras_active()}</p>
+					{#if expiresLabel}<p class="text-xs opacity-80">{expiresLabel}</p>{/if}
+				</div>
+			</div>
+		{/if}
+
+		<form onsubmit={submit} class="grid gap-3">
+			<div class="grid gap-1.5">
+				<Label for="license-key">{m.supporter_access_key()}</Label>
+				<Input
+					id="license-key"
+					bind:value={keyInput}
+					placeholder="DRZ-XXXX-XXXX-XXXX"
+					autocomplete="off"
+					spellcheck={false}
+					class="font-mono tracking-wide"
+				/>
+			</div>
+
+			{#if localError}
+				<p class="text-sm text-destructive">{localError}</p>
+			{:else if $supporterState.status === 'error'}
+				<p class="text-sm text-destructive">
+					{m.supporter_server_unreachable()}
+				</p>
+			{/if}
+
+			<Button type="submit" disabled={submitting || !keyInput.trim()}>
+				{#if submitting}{m.supporter_verifying()}{:else}{m.supporter_unlock_button()}{/if}
+			</Button>
+		</form>
+
+		<Dialog.Footer class="flex-col items-stretch gap-2 sm:flex-col sm:items-stretch">
+			{#if $isSupporter}
+				<button
+					type="button"
+					class="cursor-pointer text-center text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+					onclick={removeKey}
+				>
+					{m.supporter_remove_key()}
+				</button>
+			{:else}
+				<p class="text-center text-xs text-muted-foreground">
+					{m.supporter_no_key_yet()}
+					<a
+						href={SIGNUP_URL}
+						target="_blank"
+						rel="noopener"
+						class="font-semibold text-primary underline-offset-2 hover:underline"
+					>
+						{m.supporter_support_from({ price })}
+					</a>
+				</p>
+			{/if}
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/paywall/config.ts

@@ -0,0 +1,75 @@
+import * as m from '$lib/paraglide/messages';
+
+/**
+ * Paywall configuration.
+ *
+ * The frontend stays fully static and open source; the only server piece is the
+ * tiny `drizzli-paywall` verify API (a separate, self-hosted repo). Point the
+ * build at your deployment with the `VITE_PAYWALL_*` env vars (e.g. in a
+ * `.env` file), otherwise the sensible drizz.li defaults are used.
+ */
+
+const env = import.meta.env as Record<string, string | undefined>;
+
+const stripTrailingSlash = (url: string): string => url.replace(/\/+$/, '');
+
+/** Base URL of the self-hosted verify API (drizzli-paywall). */
+export const PAYWALL_API_BASE = stripTrailingSlash(
+	env.VITE_PAYWALL_API_BASE ?? 'https://support.drizz.li'
+);
+
+/** Where prospective subscribers go to sign up (the paywall repo's signup form). */
+export const SIGNUP_URL = env.VITE_PAYWALL_SIGNUP_URL ?? `${PAYWALL_API_BASE}/`;
+
+// ─── Location-based pricing ──────────────────────────────────────────────────
+// The signup form charges 3 in the visitor's currency (EUR / USD / CHF), picked
+// from their location. Mirror that here so the paywall copy matches. Detection
+// is timezone/locale based (no network geo lookup) and guarded for SSR.
+
+const CURRENCY_SYMBOL: Record<string, string> = { EUR: '€', USD: '$', CHF: 'CHF' };
+const US_ZONES =
+	/^America\/(New_York|Detroit|Chicago|Denver|Boise|Phoenix|Los_Angeles|Anchorage|Adak|Juneau|Sitka|Nome|Yakutat|Menominee|Indiana|Kentucky|North_Dakota)/;
+
+export type SupporterCurrency = 'EUR' | 'USD' | 'CHF';
+
+export function detectCurrency(): SupporterCurrency {
+	if (typeof Intl === 'undefined') return 'EUR';
+	let tz = '';
+	try {
+		tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+	} catch {
+		/* ignore */
+	}
+	if (/Zurich|Vaduz/.test(tz)) return 'CHF';
+	let region = '';
+	try {
+		if (typeof navigator !== 'undefined') {
+			region = new Intl.Locale(navigator.language).maximize().region || '';
+		}
+	} catch {
+		/* ignore */
+	}
+	if (region === 'CH') return 'CHF';
+	if (region === 'US' || US_ZONES.test(tz)) return 'USD';
+	return 'EUR';
+}
+
+/** Display price for the paywall panel, e.g. "€3 / month" or "CHF 3 / Monat". */
+export function getSupporterPrice(): string {
+	// VITE_PREMIUM_PRICE is the pre-rename name, still honoured so an existing
+	// deployment's .env keeps working.
+	const configured = env.VITE_SUPPORTER_PRICE ?? env.VITE_PREMIUM_PRICE;
+	if (configured) return configured;
+	const currency = detectCurrency();
+	const symbol = CURRENCY_SYMBOL[currency];
+	const amount = currency === 'CHF' ? `${symbol} 3` : `${symbol}3`;
+	return m.supporter_price_per_month({ amount });
+}
+
+/** Short, human list of what supporting unlocks (shown on the locked panel).
+ * A function, not a constant: the copy has to follow the active locale. */
+export const SUPPORTER_PERKS = (): string[] => [
+	m.supporter_perk_historical(),
+	m.supporter_perk_seasonal(),
+	m.supporter_perk_future()
+];

src/lib/paywall/supporter.ts

@@ -0,0 +1,151 @@
+/**
+ * Supporter (subscription) state.
+ *
+ * The user pastes an access key once; it is stored locally and re-verified
+ * against the self-hosted verify API on load. The last good result is cached so
+ * gated content shows instantly on reload (and keeps working briefly offline)
+ * without waiting for the network round-trip.
+ *
+ * This gate is a convenience/honor-system gate: the frontend is open source and
+ * static, so it can be bypassed. Keeping the subscriber list server-side (in the
+ * paywall repo) is what makes it meaningful in practice.
+ */
+import { derived, get, writable } from 'svelte/store';
+
+import { persisted } from 'svelte-persisted-store';
+
+import * as m from '$lib/paraglide/messages';
+
+import { PAYWALL_API_BASE } from './config';
+
+/** The supporter's access key, e.g. "DRZ-7Q2K-9F4M-XW3P". Empty when signed out. */
+export const storedLicenseKey = persisted<string>('license_key', '');
+
+export interface SupporterCache {
+	valid: boolean;
+	tier?: string;
+	/** ISO date the subscription lapses, or null for a lifetime key. */
+	expires?: string | null;
+	/** epoch ms of the last verify call */
+	checkedAt: number;
+}
+
+const CACHE_KEY = 'supporter_cache_v1';
+const LEGACY_CACHE_KEY = 'premium_cache_v1';
+
+/**
+ * Carries the pre-rename cache over on first load, so supporters who already
+ * verified aren't shown a locked page while the key re-verifies.
+ */
+function readLegacyCache(): SupporterCache | null {
+	if (typeof localStorage === 'undefined') return null;
+	try {
+		if (localStorage.getItem(CACHE_KEY)) return null;
+		const legacy = localStorage.getItem(LEGACY_CACHE_KEY);
+		if (!legacy) return null;
+		localStorage.removeItem(LEGACY_CACHE_KEY);
+		return JSON.parse(legacy) as SupporterCache;
+	} catch {
+		return null;
+	}
+}
+
+/** Last verify result, persisted so the UI doesn't flash "locked" on reload. */
+export const storedSupporterCache = persisted<SupporterCache | null>(CACHE_KEY, readLegacyCache());
+
+export type SupporterStatus = 'idle' | 'checking' | 'valid' | 'invalid' | 'error';
+
+export interface SupporterState {
+	status: SupporterStatus;
+	tier?: string;
+	expires?: string | null;
+	error?: string;
+}
+
+/** Live verification state for the current session. */
+export const supporterState = writable<SupporterState>({ status: 'idle' });
+
+function notExpired(expires: string | null | undefined): boolean {
+	if (!expires) return true; // lifetime key
+	const t = Date.parse(expires);
+	return Number.isFinite(t) && t > Date.now();
+}
+
+/**
+ * Whether supporter content should be shown. A live "valid"/"invalid" result
+ * wins; otherwise we fall back to the cached result (so a reload or a brief
+ * network blip doesn't lock a paying user out).
+ */
+export const isSupporter = derived(
+	[supporterState, storedSupporterCache],
+	([$state, $cache]): boolean => {
+		if ($state.status === 'valid') return true;
+		if ($state.status === 'invalid') return false;
+		return !!($cache && $cache.valid && notExpired($cache.expires));
+	}
+);
+
+export interface VerifyResult {
+	valid: boolean;
+	tier?: string;
+	expires?: string | null;
+	error?: string;
+}
+
+/**
+ * Verify a key against the API. On success the key is persisted and the cache
+ * updated. On an invalid key the stored key is left untouched (so an expired
+ * subscription can still show a "renew" state) but the cache is marked invalid.
+ */
+export async function verifyKey(key: string): Promise<VerifyResult> {
+	const trimmed = key.trim();
+	if (!trimmed) {
+		supporterState.set({ status: 'invalid' });
+		return { valid: false, error: m.supporter_enter_key() };
+	}
+
+	supporterState.set({ status: 'checking' });
+	try {
+		const res = await fetch(`${PAYWALL_API_BASE}/verify?key=${encodeURIComponent(trimmed)}`, {
+			headers: { accept: 'application/json' }
+		});
+		const data = (await res.json()) as VerifyResult;
+
+		if (res.ok && data.valid) {
+			storedLicenseKey.set(trimmed);
+			storedSupporterCache.set({
+				valid: true,
+				tier: data.tier,
+				expires: data.expires ?? null,
+				checkedAt: Date.now()
+			});
+			supporterState.set({ status: 'valid', tier: data.tier, expires: data.expires ?? null });
+			return { valid: true, tier: data.tier, expires: data.expires ?? null };
+		}
+
+		storedSupporterCache.set({ valid: false, checkedAt: Date.now() });
+		supporterState.set({ status: 'invalid' });
+		return { valid: false };
+	} catch (err) {
+		const message = err instanceof Error ? err.message : String(err);
+		supporterState.set({ status: 'error', error: message });
+		return { valid: false, error: message };
+	}
+}
+
+/** Re-verify the stored key (call on app / gated-page load). No-op if signed out. */
+export async function refreshSupporter(): Promise<void> {
+	const key = get(storedLicenseKey);
+	if (!key) {
+		supporterState.set({ status: 'idle' });
+		return;
+	}
+	await verifyKey(key);
+}
+
+/** Forget the key and supporter state ("sign out"). */
+export function clearLicense(): void {
+	storedLicenseKey.set('');
+	storedSupporterCache.set(null);
+	supporterState.set({ status: 'idle' });
+}

src/lib/services/nearby-cities.ts

@@ -0,0 +1,156 @@
+/**
+ * Picks a handful of cities around a location, for cross-referencing a forecast
+ * against places you already have a feel for.
+ *
+ * Open-Meteo's geocoding API can only search by name - there is no radius or
+ * reverse lookup - so the candidates come from a static GeoNames extract, cut
+ * into 10x10 degree tiles (see scripts/build-cities.mjs). Looking somewhere up
+ * costs one small tile fetch, which the browser then caches.
+ */
+import { base } from '$app/paths';
+
+/** [geonames id, name, country code, latitude, longitude, population/1000] */
+type CityRow = [number, string, string, number, number, number];
+
+export interface NearbyCity {
+	id: number;
+	name: string;
+	countryCode: string;
+	latitude: number;
+	longitude: number;
+	population: number;
+	distanceKm: number;
+}
+
+const EARTH_RADIUS_KM = 6371;
+const TILE_DEGREES = 10;
+
+export function distanceKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
+	const toRad = Math.PI / 180;
+	const dLat = (lat2 - lat1) * toRad;
+	const dLon = (lon2 - lon1) * toRad;
+	const a =
+		Math.sin(dLat / 2) ** 2 +
+		Math.cos(lat1 * toRad) * Math.cos(lat2 * toRad) * Math.sin(dLon / 2) ** 2;
+	return 2 * EARTH_RADIUS_KM * Math.asin(Math.min(1, Math.sqrt(a)));
+}
+
+function tileKey(latitude: number, longitude: number): string {
+	const lat = Math.min(89.999, Math.max(-90, latitude));
+	const lon = ((((longitude + 180) % 360) + 360) % 360) - 180;
+	return `${Math.floor((lat + 90) / TILE_DEGREES)}_${Math.floor((lon + 180) / TILE_DEGREES)}`;
+}
+
+const tileCache = new Map<string, Promise<CityRow[]>>();
+let indexPromise: Promise<Set<string>> | null = null;
+
+async function fetchJson<T>(path: string): Promise<T> {
+	const res = await fetch(`${base}/data/cities/${path}`);
+	if (!res.ok) throw new Error(`${path}: ${res.status}`);
+	return res.json() as Promise<T>;
+}
+
+/** Tiles exist only where there are cities, so the index turns an empty ocean
+ * tile into a no-op instead of a 404. */
+function loadIndex(): Promise<Set<string>> {
+	indexPromise ??= fetchJson<string[]>('index.json')
+		.then((keys) => new Set(keys))
+		.catch((err) => {
+			indexPromise = null;
+			throw err;
+		});
+	return indexPromise;
+}
+
+async function loadTile(key: string): Promise<CityRow[]> {
+	if (!(await loadIndex()).has(key)) return [];
+
+	let tile = tileCache.get(key);
+	if (!tile) {
+		tile = fetchJson<CityRow[]>(`${key}.json`).catch((err) => {
+			// a failed fetch must not poison the cache: the next visit retries
+			tileCache.delete(key);
+			throw err;
+		});
+		tileCache.set(key, tile);
+	}
+	return tile;
+}
+
+/**
+ * Widening rings. Within 400 km the tile holds towns down to 20k; past that
+ * only cities above 300k, which is exactly the bias a wide search wants - if
+ * nothing is nearby, the answer should be a place people have heard of.
+ */
+const SEARCH_RADII_KM = [200, 400, 1500];
+
+/**
+ * How far out still counts as "the place you are already looking at". A village
+ * ends where its fields start; London's own boroughs sit 20 km from its centre
+ * and share its weather, so the radius grows with the size of the location.
+ */
+function samePlaceKm(population: number): number {
+	return 10 + 15 * Math.min(1, population / 5_000_000);
+}
+
+/**
+ * Returns up to `count` cities around the given point, ordered by distance.
+ *
+ * Candidates are ranked by population damped by distance, so a town up the
+ * valley can outrank a metropolis three hours away, and picks have to keep
+ * their distance from each other - otherwise a place like New York fills the
+ * list with its own boroughs, and a big city fills it with commuter suburbs
+ * that share its weather anyway.
+ */
+export async function findNearbyCities(
+	latitude: number,
+	longitude: number,
+	count = 10,
+	population = 0
+): Promise<NearbyCity[]> {
+	const rows = await loadTile(tileKey(latitude, longitude));
+	if (rows.length === 0) return [];
+
+	const ownFootprintKm = samePlaceKm(population);
+
+	let best: NearbyCity[] = [];
+
+	for (const radius of SEARCH_RADII_KM) {
+		const halfWeightKm = radius / 2;
+		// far-apart picks in a wide search, tight ones when everything is close
+		const minSeparationKm = Math.max(25, radius / 20);
+
+		const scored = rows
+			.map(([id, name, countryCode, lat, lon, popK]) => {
+				const dist = distanceKm(latitude, longitude, lat, lon);
+				return {
+					city: {
+						id,
+						name,
+						countryCode,
+						latitude: lat,
+						longitude: lon,
+						population: popK * 1000,
+						distanceKm: dist
+					},
+					score: popK / (1 + (dist / halfWeightKm) ** 2)
+				};
+			})
+			.filter(({ city }) => city.distanceKm >= ownFootprintKm && city.distanceKm <= radius)
+			.sort((a, b) => b.score - a.score);
+
+		const picked: NearbyCity[] = [];
+		for (const { city } of scored) {
+			if (picked.length === count) break;
+			const tooClose = picked.some(
+				(p) => distanceKm(p.latitude, p.longitude, city.latitude, city.longitude) < minSeparationKm
+			);
+			if (!tooClose) picked.push(city);
+		}
+
+		if (picked.length >= count) return picked.sort((a, b) => a.distanceKm - b.distanceKm);
+		if (picked.length > best.length) best = picked;
+	}
+
+	return best.sort((a, b) => a.distanceKm - b.distanceKm);
+}

src/lib/stores/page-transition.svelte.ts

@@ -0,0 +1,33 @@
+import { writable } from 'svelte/store';
+
+/**
+ * Whether the current page has enough data on screen to be worth revealing.
+ *
+ * The weather pages fetch their forecast *after* the route swap, so a plain
+ * navigation transition would cross-fade one skeleton into another and then cut
+ * hard to the real content. The layout holds its transition open on this flag
+ * instead, so the fade lines up with the page actually being loaded.
+ */
+export const pageContentReady = writable(true);
+
+/**
+ * Called by the layout before it swaps to a route that fetches its own data.
+ *
+ * The layout owns the "not ready yet" side deliberately: the incoming page's
+ * effects have not necessarily run at that point (rendering is paused inside a
+ * view transition), so a page that cleared the flag itself would sometimes be
+ * announced as ready before it had fetched anything.
+ */
+export function markPageLoading(): void {
+	pageContentReady.set(false);
+}
+
+/**
+ * Declare a page's readiness. Pass a getter for "my data has arrived". Only
+ * ever sets the flag - clearing it is the layout's job (see above).
+ */
+export function reportPageReady(isReady: () => boolean): void {
+	$effect(() => {
+		if (isReady()) pageContentReady.set(true);
+	});
+}

src/lib/stores/settings.ts

@@ -1,24 +1,24 @@
 import { persisted } from 'svelte-persisted-store';
 
 export interface GeoLocation {
-	id?: number;
+	id: number;
-	name?: string;
+	name: string;
-	latitude?: number;
+	latitude: number;
-	longitude?: number;
+	longitude: number;
-	elevation?: number;
+	elevation: number;
-	feature_code?: string;
+	feature_code: string;
-	country_code?: string;
+	country_code: string | undefined;
-	admin1_id?: number;
+	admin1_id: number | undefined;
-	admin3_id?: number;
+	admin3_id?: number | undefined;
-	admin4_id?: number;
+	admin4_id?: number | undefined;
-	timezone?: string;
+	timezone: string;
-	population?: number;
+	population: number | undefined;
-	postcodes?: string[];
+	postcodes: string[] | undefined;
-	country_id?: number;
+	country_id: number | undefined;
-	country?: string;
+	country: string | undefined;
-	admin1?: string;
+	admin1: string | undefined;
-	admin3?: string;
+	admin3?: string | undefined;
-	admin4?: string;
+	admin4?: string | undefined;
 }
 
 export const defaultLocation: GeoLocation = {
@@ -43,3 +43,137 @@ export const defaultLocation: GeoLocation = {
 };
 
 export const storedLocation = persisted('stored_location', defaultLocation as GeoLocation);
+
+export type Theme = 'system' | 'light' | 'dark';
+
+export const storedTheme = persisted<Theme>('theme', 'system');
+
+/** Selected forecast model, shared across the whole site. */
+export const storedModel = persisted<string>('selected_model', 'best_match');
+
+/** Which variables are visible in the hourly table and the meteograms. */
+export interface VariablePrefs {
+	table: Record<string, boolean>;
+	charts: Record<string, boolean>;
+}
+
+export const defaultVariablePrefs: VariablePrefs = {
+	table: {
+		icons: true,
+		temperature: true,
+		feels: true,
+		wind: true,
+		humidity: true,
+		clouds: true,
+		precipitation: true,
+		// extra rows, off by default
+		dew_point: false,
+		gusts: false,
+		pressure: false,
+		uv: false,
+		visibility: false,
+		snowfall: false
+	},
+	charts: {
+		temperature: true,
+		cloud_cover: true,
+		precipitation: true,
+		precipitation_probability: true,
+		wind: true,
+		humidity: true
+	}
+};
+
+export const storedVariablePrefs = persisted<VariablePrefs>('variable_prefs', defaultVariablePrefs);
+
+/** Order of the hourly-table rows (visibility is the separate toggle above). */
+export const defaultTableRowOrder: string[] = [
+	'icons',
+	'temperature',
+	'feels',
+	'dew_point',
+	'wind',
+	'gusts',
+	'humidity',
+	'clouds',
+	'pressure',
+	'uv',
+	'visibility',
+	'precipitation',
+	'snowfall'
+];
+
+export const storedTableRowOrder = persisted<string[]>('table_row_order_v1', defaultTableRowOrder);
+
+/**
+ * Normalizes a stored row order against the known rows: drops keys that no
+ * longer exist and appends new rows (added after the user last saved) at the
+ * end, so stored orders survive app updates.
+ */
+export function mergeTableRowOrder(stored: string[]): string[] {
+	return [
+		...stored.filter((k) => defaultTableRowOrder.includes(k)),
+		...defaultTableRowOrder.filter((k) => !stored.includes(k))
+	];
+}
+
+/** Hourly table interval: 3-hourly (default) or 1-hourly. */
+export const storedHourlyInterval = persisted<1 | 3>('hourly_interval', 3);
+
+/**
+ * Meteogram layout: an ordered list of chart panels, each holding an ordered
+ * list of variable keys (see the chart variable registry). Users drag
+ * variables between panels to fully customise the meteograms.
+ */
+export interface ChartPanel {
+	id: string;
+	variables: string[];
+}
+
+export const defaultChartLayout: ChartPanel[] = [
+	{ id: 'panel-1', variables: ['temperature', 'weather_icons'] },
+	{ id: 'panel-2', variables: ['precipitation', 'precipitation_probability', 'cloud_cover'] },
+	{ id: 'panel-3', variables: ['wind', 'wind_gusts', 'wind_direction'] }
+];
+
+export const storedChartLayout = persisted<ChartPanel[]>('chart_layout_v1', defaultChartLayout);
+
+/**
+ * Time range the meteograms open on. 'auto' narrows to three days on a phone,
+ * where a full week of hours is too dense to read, and shows everything on
+ * roomier screens.
+ */
+export type ChartRangePref = 'auto' | 'today' | '3d' | '5d' | 'all';
+
+export const storedChartRange = persisted<ChartRangePref>('chart_range_v1', 'auto');
+
+/** Selected ensemble model for the 14-day spread forecast. */
+export const storedEnsembleModel = persisted<string>('ensemble_model', 'ncep_gefs_seamless');
+
+/** Reanalysis used on the historical page, and the seasonal model. */
+export const storedArchiveModel = persisted<string>('archive_model', 'best_match');
+export const storedSeasonalModel = persisted<string>('seasonal_model', 'best_match');
+
+/** Measurement units, shared across every forecast page and persisted. */
+export interface UnitPrefs {
+	temperature_unit: 'celsius' | 'fahrenheit';
+	wind_speed_unit: 'kmh' | 'ms' | 'mph' | 'kn';
+	precipitation_unit: 'mm' | 'inch';
+}
+
+export const defaultUnits: UnitPrefs = {
+	temperature_unit: 'celsius',
+	wind_speed_unit: 'kmh',
+	precipitation_unit: 'mm'
+};
+
+export const storedUnits = persisted<UnitPrefs>('units_v1', defaultUnits);
+
+/** Recently visited and starred locations, shown in the search dropdown. */
+export const storedRecentLocations = persisted<GeoLocation[]>('recent_locations_v1', []);
+export const storedFavoriteLocations = persisted<GeoLocation[]>('favorite_locations_v1', []);
+
+/** Stable key for de-duping locations (geocoding id, or rounded coordinates). */
+export function locationKey(l: GeoLocation): string {
+	return l.id && l.id !== 0 ? `id:${l.id}` : `c:${l.latitude.toFixed(3)},${l.longitude.toFixed(3)}`;
+}

src/lib/types.ts

@@ -1,30 +0,0 @@
-export interface Parameters {
-	latitude?: number | number[];
-	longitude?: number | number[];
-	hourly?: string[];
-	models?: string[];
-	daily?: string[];
-	current?: string[];
-	minutely_15?: string[];
-	timezone?: string;
-	location_mode?: string;
-	csv_coordinates?: string;
-	time_mode?: string;
-	past_days?: string;
-	forecast_days?: string;
-	end_date?: string;
-	start_date?: string;
-	past_hours?: string;
-	cell_selection?: string;
-	forecast_hours?: string;
-	past_minutely_15?: string;
-	temporal_resolution?: string;
-	forecast_minutely_15?: string;
-	tilt?: string;
-	azimuth?: string;
-	timeformat?: string;
-	wind_speed_unit?: string;
-	temperature_unit?: string;
-	precipitation_unit?: string;
-	[key: string]: any;
-}

src/lib/utils/date.ts

@@ -0,0 +1,73 @@
+import { isSameDay as isSameDayDateFns } from 'date-fns';
+import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
+import { de, enGB, es, fr, it } from 'date-fns/locale';
+
+import * as m from '$lib/paraglide/messages';
+import { getLocale } from '$lib/paraglide/runtime';
+
+import type { Locale as DateFnsLocale } from 'date-fns';
+
+// Weekday and month names come from date-fns, so they have to follow the same
+// locale the messages do.
+const DATE_LOCALES: Record<string, DateFnsLocale> = { en: enGB, de, es, fr, it };
+
+/**
+ * Formats a UTC Date into a string for a specific timezone using date-fns patterns.
+ * Patterns: 'HH:mm' for 24h time, 'EEE' for short weekday, etc.
+ */
+export function formatZoned(date: Date, timeZone: string, pattern: string): string {
+	return formatInTimeZone(date, timeZone, pattern, {
+		locale: DATE_LOCALES[getLocale()] ?? enGB
+	});
+}
+
+/**
+ * Checks if two dates are the same day in a specific timezone.
+ * Important for comparing weather forecast days against a selected date.
+ */
+export function isSameDayInZone(date1: Date, date2: Date, timeZone: string): boolean {
+	const z1 = toZonedTime(date1, timeZone);
+	const z2 = toZonedTime(date2, timeZone);
+	return isSameDayDateFns(z1, z2);
+}
+
+/**
+ * Gets the numeric hour (0-23) for a date in a specific timezone.
+ */
+export function getZonedHour(date: Date, timeZone: string): number {
+	return parseInt(formatInTimeZone(date, timeZone, 'H'), 10);
+}
+
+/**
+ * Returns a relative label like "Today", "Tomorrow", "Yesterday",
+ * or a formatted date string, all relative to the target timezone.
+ */
+export function getRelativeDayLabel(date: Date, timeZone: string): string {
+	const now = new Date();
+	const zonedDate = toZonedTime(date, timeZone);
+	const zonedNow = toZonedTime(now, timeZone);
+
+	if (isSameDayDateFns(zonedDate, zonedNow)) return m.day_today();
+
+	const tomorrow = new Date(zonedNow);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	if (isSameDayDateFns(zonedDate, tomorrow)) return m.day_tomorrow();
+
+	const yesterday = new Date(zonedNow);
+	yesterday.setDate(yesterday.getDate() - 1);
+	if (isSameDayDateFns(zonedDate, yesterday)) return m.day_yesterday();
+
+	return formatZoned(date, timeZone, 'EEE d MMM');
+}
+
+/**
+ * Formats a UTC offset in seconds to a string like "UTC+1" or "UTC-05:00"
+ */
+export function formatUtcOffset(offsetSeconds: number): string {
+	const sign = offsetSeconds >= 0 ? '+' : '-';
+	const abs = Math.abs(offsetSeconds);
+	const hours = Math.floor(abs / 3600);
+	const minutes = Math.floor((abs % 3600) / 60);
+	const pad = (n: number) => n.toString().padStart(2, '0');
+	return minutes === 0 ? `UTC${sign}${hours}` : `UTC${sign}${hours}:${pad(minutes)}`;
+}

src/lib/utils/day-swap.ts

@@ -0,0 +1,62 @@
+import { tick } from 'svelte';
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * Runs a day change inside a view transition, so the outgoing day is still on
+ * screen while the incoming one fades in - a real cross-fade rather than the
+ * old content vanishing and the new one fading up from nothing.
+ *
+ * Only the regions that actually change carry a `view-transition-name` (see
+ * `.day-region-*` in routes/layout.css); everything else - the strip, the
+ * header, the page chrome - is pinned by the `day-switch` class so it stays
+ * completely still.
+ */
+export async function runDayTransition(update: () => void): Promise<void> {
+	if (prefersReducedMotion() || !document.startViewTransition) {
+		update();
+		return;
+	}
+
+	const root = document.documentElement;
+	root.classList.add('day-switch');
+	try {
+		// Svelte applies the change on the next tick; the transition has to wait
+		// for that before it snapshots the new state.
+		await document.startViewTransition(async () => {
+			update();
+			await tick();
+		}).finished;
+	} catch {
+		/* a superseded transition is fine - the DOM is already up to date */
+	} finally {
+		root.classList.remove('day-switch');
+	}
+}
+
+/**
+ * Fallback for browsers without view transitions: fade the block back in when
+ * the value passed to it changes. Animates the existing node rather than
+ * remounting it, so the canvas charts keep their zoom state.
+ */
+export function daySwap(node: HTMLElement, key: unknown) {
+	let current = key;
+
+	const play = () => {
+		// view transitions handle it properly where they exist
+		if (typeof document.startViewTransition === 'function' || prefersReducedMotion()) return;
+		node.animate([{ opacity: 0.1 }, { opacity: 1 }], {
+			duration: 460,
+			easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)'
+		});
+	};
+
+	return {
+		update(next: unknown) {
+			if (next === current) return;
+			current = next;
+			play();
+		}
+	};
+}

src/lib/utils/index.ts

@@ -1,9 +1,4 @@
 export * from './ui.ts';
-export * from './meteo.ts';
-
-export const isNumeric = (num: string | number) =>
-	(typeof num === 'number' || (typeof num === 'string' && num.trim() !== '')) &&
-	!isNaN(num as number);
 
 export const pad = (n: string | number) => {
 	if (n === null || n === undefined) {
@@ -11,16 +6,3 @@ export const pad = (n: string | number) => {
 	}
 	return ('0' + n).slice(-2);
 };
-
-export function debounce<F extends (...args: unknown[]) => unknown>(
-	func: F,
-	timeout = 100
-): (this: ThisParameterType<F>, ...args: Parameters<F>) => void {
-	let timer: ReturnType<typeof setTimeout>;
-	return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
-		clearTimeout(timer);
-		timer = setTimeout(() => {
-			func.apply(this, args);
-		}, timeout);
-	};
-}

src/lib/utils/location.ts

@@ -0,0 +1,138 @@
+import { error, redirect } from '@sveltejs/kit';
+
+import { deLocalizeHref, localizeHref } from '$lib/paraglide/runtime';
+
+import type { GeoLocation } from '$lib/stores/settings';
+
+export const geoLocationNameToRoute = (name: string) => {
+	const lowerCase = name.toLowerCase().replaceAll(' ', '-');
+	return lowerCase.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+
+// coordinate routes look like "52.52N13.41E" (negative values for S/W); GPS
+// selections navigate here directly, no geocoding id involved
+const COORD_ROUTE = /^(-?\d+(?:\.\d+)?)N(-?\d+(?:\.\d+)?)E$/i;
+
+/** Only the fields the route is built from, so callers holding a partial record
+ * (the nearby-cities list, for one) don't have to fake a whole GeoLocation. */
+export type RoutableLocation = Pick<
+	GeoLocation,
+	'id' | 'name' | 'latitude' | 'longitude' | 'feature_code' | 'population'
+>;
+
+export function buildLocationRoute(location: RoutableLocation): string {
+	// coordinate-only locations (GPS) have no real geocoding id
+	if (location.feature_code === 'COORD' || !location.id) {
+		return `${location.latitude.toFixed(4)}N${location.longitude.toFixed(4)}E`;
+	}
+	const locationRoute = geoLocationNameToRoute(location.name);
+	if (location.population && location.population > 543000) {
+		return locationRoute;
+	}
+	return locationRoute + '_' + location.id;
+}
+
+export const coordinateLocation = (latitude: number, longitude: number): GeoLocation => ({
+	id: 0,
+	name: `${latitude.toFixed(2)}°N ${longitude.toFixed(2)}°E`,
+	latitude,
+	longitude,
+	elevation: 0,
+	feature_code: 'COORD',
+	country_code: undefined,
+	admin1_id: undefined,
+	admin3_id: undefined,
+	admin4_id: undefined,
+	timezone: 'UTC',
+	population: undefined,
+	postcodes: undefined,
+	country_id: undefined,
+	country: undefined,
+	admin1: undefined,
+	admin3: undefined,
+	admin4: undefined
+});
+
+// the geocoding API response is untrusted input: it can be an error object or
+// (with a crafted URL) something else entirely, so the shape is checked before
+// anything downstream dereferences it
+const isGeoLocation = (value: unknown): value is GeoLocation => {
+	if (typeof value !== 'object' || value === null) return false;
+	const candidate = value as Record<string, unknown>;
+	return (
+		typeof candidate.name === 'string' &&
+		typeof candidate.id === 'number' &&
+		Number.isFinite(candidate.latitude) &&
+		Number.isFinite(candidate.longitude)
+	);
+};
+
+interface ResolveLocationOptions {
+	urlLocation: string;
+	routePrefix: string;
+	event: {
+		fetch: typeof fetch;
+		url: URL;
+	};
+}
+
+export async function resolveLocationFromRoute({
+	urlLocation,
+	routePrefix,
+	event
+}: ResolveLocationOptions): Promise<GeoLocation> {
+	const coordMatch = urlLocation.match(COORD_ROUTE);
+	if (coordMatch) {
+		return coordinateLocation(parseFloat(coordMatch[1]), parseFloat(coordMatch[2]));
+	}
+
+	let urlLocationName: string;
+	let urlLocationId: string | undefined;
+
+	if (urlLocation.includes('_')) {
+		const split = urlLocation.split('_');
+		urlLocationName = split[0];
+		urlLocationId = split[1];
+	} else if (/^\d+$/.test(urlLocation)) {
+		urlLocationName = '';
+		urlLocationId = urlLocation;
+	} else {
+		urlLocationName = urlLocation.includes('-') ? urlLocation.replace(/-/g, ' ') : urlLocation;
+		urlLocationId = undefined;
+	}
+
+	let location: GeoLocation;
+
+	// route params are attacker-controlled: ids must be numeric and names are
+	// URL-encoded so nothing can be injected into the API query string
+	if (urlLocationId && /^\d+$/.test(urlLocationId)) {
+		const res = await event.fetch(
+			`https://geocoding-api.open-meteo.com/v1/get?id=${encodeURIComponent(urlLocationId)}`
+		);
+		if (!res.ok) error(404, 'Location not found');
+		const candidate = await res.json();
+		if (!isGeoLocation(candidate)) error(404, 'Location not found');
+		location = candidate;
+	} else {
+		const res = await event.fetch(
+			`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(urlLocationName)}&count=1&language=en&format=json`
+		);
+		if (!res.ok) error(404, 'Location not found');
+		const geocodingResponse = await res.json();
+		const candidate = geocodingResponse?.results?.[0];
+		if (!isGeoLocation(candidate)) error(404, 'Location not found');
+		location = candidate;
+	}
+
+	// trailingSlash is 'always' (see routes/+layout.ts), so the router serves
+	// every path with a trailing slash. Match that here or the equality check
+	// never holds and the redirect loops forever. The comparison also has to
+	// ignore the locale prefix the URL carries, while the redirect keeps it -
+	// otherwise every localized URL would bounce back to English.
+	const canonicalPath = `${routePrefix}${buildLocationRoute(location)}/`;
+	if (deLocalizeHref(event.url.pathname) !== canonicalPath) {
+		throw redirect(303, localizeHref(canonicalPath));
+	}
+
+	return location;
+}

src/lib/utils/maps-domain.ts

@@ -0,0 +1,79 @@
+/**
+ * Translates drizzli's model ids (Open-Meteo API model names, see
+ * src/routes/weather/options.ts) into domain values understood by the maps
+ * viewer (open-meteo/maps, weather-map-layer src/domains.ts).
+ *
+ * The map advertises the domains it actually supports in its `om-maps:ready`
+ * handshake; candidates are tried in order and the first advertised one wins.
+ * Seamless API models list their seamless domain first, so they upgrade
+ * automatically once the maps app ships seamless support; until then they fall
+ * back to their widest-coverage member (a regional member could be entirely
+ * off-screen). Models without an entry are tried under their own id; models
+ * the map does not serve at all (best_match, google, UKMO ensembles)
+ * resolve to null.
+ */
+const modelDomainCandidates: Record<string, string[]> = {
+	// DWD Germany
+	icon_seamless: ['dwd_icon_seamless', 'dwd_icon'],
+	icon_global: ['dwd_icon'],
+	icon_eu: ['dwd_icon_eu'],
+	icon_d2: ['dwd_icon_d2'],
+
+	// NOAA U.S.
+	gfs_seamless: ['ncep_gfs_seamless', 'ncep_gfs013'],
+	gfs_global: ['ncep_gfs013'],
+	gfs_hrrr: ['ncep_hrrr_conus'],
+	gfs_graphcast025: ['ncep_gfs_graphcast025'],
+
+	// Météo-France
+	meteofrance_seamless: ['meteofrance_seamless', 'meteofrance_arpege_world025'],
+	meteofrance_arpege_world: ['meteofrance_arpege_world025'],
+	meteofrance_arome_france: ['meteofrance_arome_france0025'],
+
+	// UK Met Office
+	ukmo_seamless: ['ukmo_seamless', 'ukmo_global_deterministic_10km'],
+
+	// KNMI Netherlands
+	knmi_seamless: ['knmi_seamless', 'knmi_harmonie_arome_europe'],
+
+	// DMI Denmark (no DMI seamless domain in the maps project)
+	dmi_seamless: ['dmi_harmonie_arome_europe'],
+
+	// MET Norway
+	metno_seamless: ['metno_nordic_pp'],
+	metno_nordic: ['metno_nordic_pp'],
+
+	// MeteoSwiss (CH2 covers a wider area than CH1)
+	meteoswiss_icon_seamless: ['meteoswiss_icon_ch2'],
+
+	// CHMI Czech Republic (Central Europe is the widest native domain)
+	chmi_aladin_seamless: ['chmi_aladin_seamless', 'chmi_aladin_central_europe_2km'],
+
+	// JMA Japan
+	jma_seamless: ['jma_seamless', 'jma_gsm'],
+
+	// GEM Canada (gdps/rdps carry resolution suffixes in newer map builds;
+	// older builds advertise the plain names, so try both)
+	gem_seamless: ['cmc_gem_seamless', 'cmc_gem_gdps_15km', 'cmc_gem_gdps'],
+	gem_global: ['cmc_gem_gdps_15km', 'cmc_gem_gdps'],
+	gem_regional: ['cmc_gem_rdps_10km', 'cmc_gem_rdps'],
+
+	// Ensemble models
+	icon_seamless_eps: ['dwd_icon_eps'],
+	icon_global_eps: ['dwd_icon_eps'],
+	icon_eu_eps: ['dwd_icon_eu_eps'],
+	icon_d2_eps: ['dwd_icon_d2_eps'],
+	ncep_gefs_seamless: ['ncep_gefs025'],
+	gem_global_ensemble: ['cmc_gem_geps']
+};
+
+/** Resolve a model id to a maps domain the map advertised as supported. */
+export const mapsDomainForModel = (
+	model: string,
+	supportedDomains: ReadonlySet<string>
+): string | null => {
+	for (const candidate of modelDomainCandidates[model] ?? [model]) {
+		if (supportedDomains.has(candidate)) return candidate;
+	}
+	return null;
+};

src/lib/utils/meteo.ts

@@ -1,7 +0,0 @@
-export function geoLocationNameToRoute(name: string): string {
-	// Placeholder implementation
-	return name
-		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, '-')
-		.replace(/^-*|-*$/g, '');
-}

src/lib/utils/now.svelte.ts

@@ -0,0 +1,56 @@
+import { browser } from '$app/environment';
+
+/**
+ * Shared "now" clock.
+ *
+ * One timer, aligned to the wall-clock minute, drives every current-time marker
+ * in the app (the hourly table's NOW line, the meteogram's time marker) so they
+ * stay accurate without a page reload.
+ *
+ * The timer only runs while at least one component is subscribed, and re-aligns
+ * after each tick so it can't drift or fire twice within a minute (e.g. after
+ * the tab has been suspended).
+ */
+
+let current = $state(new Date());
+let subscribers = 0;
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+const MINUTE_MS = 60_000;
+
+function scheduleTick() {
+	timer = setTimeout(
+		() => {
+			current = new Date();
+			scheduleTick();
+		},
+		MINUTE_MS - (Date.now() % MINUTE_MS)
+	);
+}
+
+/**
+ * Reactive current time, refreshed on every minute boundary while the calling
+ * component is mounted. On the server it just reports render time.
+ */
+export function useNow(): { readonly current: Date } {
+	if (browser) {
+		$effect(() => {
+			if (subscribers++ === 0) {
+				current = new Date();
+				scheduleTick();
+			}
+			return () => {
+				if (--subscribers === 0) {
+					clearTimeout(timer);
+					timer = undefined;
+				}
+			};
+		});
+	}
+
+	return {
+		get current() {
+			return browser ? current : new Date();
+		}
+	};
+}

src/lib/utils/url-state.ts

@@ -0,0 +1,51 @@
+/**
+ * Mirrors UI state into the query string so a view can be linked and reloaded
+ * exactly as it was: which day is open, which model is plotted, which variables
+ * are compared.
+ *
+ * Writes use `replaceState` rather than `goto`, so mirroring state never adds a
+ * history entry or re-runs a load - the back button still means "the page
+ * before", not "the previous day I clicked".
+ *
+ * Callers must pass the URL *untracked* (`get(page).url`, not `$page.url`).
+ * Reading it reactively inside the same effect that writes it creates a loop:
+ * replaceState publishes a new URL, the effect re-runs, writes again - which
+ * Svelte eventually kills with `effect_update_depth_exceeded`, hanging the page.
+ */
+import { browser } from '$app/environment';
+import { replaceState } from '$app/navigation';
+
+export function syncSearchParams(url: URL, updates: Record<string, string | null>): void {
+	if (!browser) return;
+	const next = new URL(url);
+	for (const [key, value] of Object.entries(updates)) {
+		if (value == null || value === '') next.searchParams.delete(key);
+		else next.searchParams.set(key, value);
+	}
+	if (next.href === url.href) return;
+	try {
+		replaceState(next, {});
+	} catch {
+		// A page whose state settles during mount can get here before the router
+		// has taken over. The URL is cosmetic, so retry on the next frame rather
+		// than letting it break the page.
+		requestAnimationFrame(() => {
+			try {
+				replaceState(next, {});
+			} catch {
+				/* give up: the view still works, it just isn't linkable yet */
+			}
+		});
+	}
+}
+
+/** Reads a comma-separated list, dropping empties. */
+export function readList(url: URL, key: string): string[] | null {
+	const raw = url.searchParams.get(key);
+	if (!raw) return null;
+	const list = raw
+		.split(',')
+		.map((s) => s.trim())
+		.filter(Boolean);
+	return list.length > 0 ? list : null;
+}

src/routes/+layout.svelte

@@ -1,9 +1,173 @@
 <script lang="ts">
+	import { tick } from 'svelte';
+	import { get } from 'svelte/store';
+	import { fade, fly } from 'svelte/transition';
+
+	import { afterNavigate, onNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	import { markPageLoading, pageContentReady } from '$lib/stores/page-transition.svelte';
+	import { storedTheme } from '$lib/stores/settings';
+
+	import Footer from '$lib/components/navigation/footer.svelte';
+	import Header from '$lib/components/navigation/header.svelte';
+	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
+
 	import favicon from '$lib/assets/favicon.svg';
 
+	import { routePath } from '$lib/i18n';
+
 	import './layout.css';
 
 	let { children } = $props();
+
+	// keep the .dark class in sync with the persisted theme; in 'system' mode
+	// follow the OS preference live
+	let themeSettled = false;
+	let themeTimer = 0;
+	$effect(() => {
+		const theme = $storedTheme;
+		const mq = window.matchMedia('(prefers-color-scheme: dark)');
+		const apply = () => {
+			const root = document.documentElement;
+			const dark = theme === 'dark' || (theme === 'system' && mq.matches);
+			const paint = () => root.classList.toggle('dark', dark);
+
+			// The very first application is just painting the stored theme - only
+			// an actual switch afterwards is worth cross-fading.
+			const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			if (!themeSettled || reduced) {
+				themeSettled = true;
+				paint();
+				return;
+			}
+
+			if (document.startViewTransition) {
+				// one cross-fade of the whole document; component transitions untouched
+				document.startViewTransition(paint);
+				return;
+			}
+
+			// no view transitions: fall back to fading the colours for one window
+			root.classList.add('theme-transition');
+			clearTimeout(themeTimer);
+			themeTimer = window.setTimeout(() => root.classList.remove('theme-transition'), 400);
+			paint();
+		};
+
+		apply();
+		mq.addEventListener('change', apply);
+		return () => mq.removeEventListener('change', apply);
+	});
+
+	// ── Page cross-fade ───────────────────────────────────────────────────────
+	// A real cross-fade needs the outgoing page still on screen while the
+	// incoming one appears - so the view transition is opened at navigation and
+	// deliberately held open until the new page reports that its data has landed.
+	// The browser keeps showing the old snapshot for that whole time (rather than
+	// flashing a skeleton), then fades it into the finished page.
+	//
+	// The wait is capped: past the ceiling we cross-fade into whatever is on
+	// screen instead of freezing the UI on a slow network.
+	const READY_CEILING_MS = 2200;
+	const FADE_OUT_MS = 170;
+
+	let contentVisible = $state(true);
+	let revealTimer = 0;
+
+	const reducedMotion = () =>
+		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	// Routes that fetch their own forecast after mounting. Knowing this up front
+	// is what makes the wait reliable: the layout clears the ready flag before
+	// the swap rather than trusting the incoming page to have done it.
+	const DATA_ROUTES = new Set([
+		'/weather/week/[location]',
+		'/weather/14-day/[location]',
+		'/weather/compare/[location]',
+		'/weather/seasonal/[location]',
+		'/weather/historical/[location]'
+	]);
+
+	/** Resolves once the freshly mounted page has its data, or at the ceiling. */
+	async function waitForContent(): Promise<void> {
+		const deadline = Date.now() + READY_CEILING_MS;
+		while (!get(pageContentReady) && Date.now() < deadline) {
+			await new Promise((resolve) => setTimeout(resolve, 40));
+		}
+		// one more frame so the page paints its data before the snapshot is taken
+		await tick();
+	}
+
+	onNavigate((navigation) => {
+		if (reducedMotion()) return;
+
+		const loadsData = DATA_ROUTES.has(navigation.to?.route?.id ?? '');
+		if (loadsData) markPageLoading();
+
+		if (typeof document.startViewTransition === 'function') {
+			return new Promise<void>((swap) => {
+				document.startViewTransition(async () => {
+					// hand control back so SvelteKit swaps the DOM underneath the
+					// frozen snapshot of the old page
+					swap();
+					// A superseded navigation (a redirect, or a fast second click)
+					// rejects this promise; that is not an error worth surfacing,
+					// and leaving it unhandled shows up as "navigation aborted".
+					await navigation.complete.catch(() => {});
+					if (loadsData) await waitForContent();
+				});
+			});
+		}
+
+		// No view transitions: fall back to fading out, then back in on arrival.
+		clearTimeout(revealTimer);
+		contentVisible = false;
+		return new Promise((resolve) => setTimeout(resolve, FADE_OUT_MS));
+	});
+
+	let mainEl = $state<HTMLElement | null>(null);
+
+	afterNavigate((navigation) => {
+		// The page scrolls inside <main>, not the window, so SvelteKit's own scroll
+		// handling never touches it and a new page would open half way down.
+		// Back/forward and in-page anchors keep their position.
+		if (navigation.type !== 'popstate' && !navigation.to?.url.hash) {
+			mainEl?.scrollTo({ top: 0 });
+		}
+
+		if (typeof document.startViewTransition === 'function' || reducedMotion()) {
+			contentVisible = true;
+			return;
+		}
+		const startedAt = Date.now();
+		const reveal = () => {
+			if (get(pageContentReady) || Date.now() - startedAt > READY_CEILING_MS) {
+				contentVisible = true;
+				return;
+			}
+			revealTimer = window.setTimeout(reveal, 60);
+		};
+		reveal();
+	});
+
+	// the maps page embeds a full-bleed map: no padding, no scrolling
+	let fullBleed = $derived(routePath($page.url.pathname).startsWith('/weather/maps'));
+
+	let sidebarCollapsed = $state(false);
+	let mobileMenuOpen = $state(false);
+
+	const toggleSidebar = () => {
+		sidebarCollapsed = !sidebarCollapsed;
+	};
+
+	const toggleMobileMenu = () => {
+		mobileMenuOpen = !mobileMenuOpen;
+	};
+
+	const closeMobileMenu = () => {
+		mobileMenuOpen = false;
+	};
 </script>
 
 <svelte:head>
@@ -12,6 +176,63 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 </svelte:head>
 
-<main class="min-h-screen">
+<div class="flex h-screen overflow-hidden bg-background text-foreground">
+	<!-- Desktop sidebar -->
+	<div class="hidden h-full shrink-0 md:block">
+		<WeatherNav collapsed={sidebarCollapsed} onToggle={toggleSidebar} />
+	</div>
+
+	<!-- Mobile overlay -->
+	{#if mobileMenuOpen}
+		<div class="fixed inset-0 z-50 md:hidden" role="presentation">
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="absolute inset-0 bg-black/30"
+				transition:fade={{ duration: 150 }}
+				onclick={closeMobileMenu}
+				onkeydown={closeMobileMenu}
+			></div>
+			<div
+				class="relative z-1 h-full w-55 shadow-lg"
+				transition:fly={{ x: -220, duration: 200, opacity: 1 }}
+			>
+				<WeatherNav collapsed={false} onMobileClose={closeMobileMenu} />
+			</div>
+		</div>
+	{/if}
+
+	<!-- Main area: topbar + content -->
+	<div class="flex min-w-0 flex-1 flex-col h-full">
+		<Header onMenuToggle={toggleMobileMenu} />
+
+		<!-- The padding stays on <main> itself: the day strip sticks with a
+		     negative offset that exactly cancels it, so moving it to an inner
+		     wrapper would dock the strip too high and clip its top row.
+		     flex-col + flex-1 below keeps the footer on the bottom edge even when
+		     the page is too short to fill the viewport. -->
+		<main
+			bind:this={mainEl}
+			class={fullBleed
+				? 'flex-1 overflow-hidden'
+				: 'flex flex-1 flex-col overflow-y-auto p-3 lg:px-8 lg:py-6'}
+		>
+			{#if fullBleed}
 				{@render children()}
-</main>
+			{:else}
+				<!-- cap the content width on very large screens; the footer below
+				     gives the page its ending, so only modest bottom room is needed -->
+				<div
+					class="page-fade mx-auto w-full max-w-[1536px] flex-1 pb-24"
+					class:page-fade-hidden={!contentVisible}
+				>
+					{@render children()}
+				</div>
+				<!-- full-bleed footer inside the scroll area (its own inner max-w),
+				     cancelling main's padding so it sits flush with the edges -->
+				<div class="-mx-3 -mb-3 lg:-mx-8 lg:-mb-6">
+					<Footer />
+				</div>
+			{/if}
+		</main>
+	</div>
+</div>

src/routes/+layout.ts

@@ -1 +1,5 @@
 export const prerender = true;
+
+// Static hosting: emit every page as <path>/index.html so plain file servers
+// resolve URLs like /weather/week/ without pretty-URL rewrites.
+export const trailingSlash = 'always';

src/routes/+page.svelte

@@ -1,271 +1,16 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { fade, fly } from 'svelte/transition';
 
-	import { storedLocation } from '$lib/stores/settings';
+	import { goto } from '$app/navigation';
 
-	import { Button } from '$lib/components/ui/button';
+	import { localizeHref } from '$lib/paraglide/runtime';
-	import {
-		Card,
-		CardContent,
-		CardDescription,
-		CardHeader,
-		CardTitle
-	} from '$lib/components/ui/card';
-
-	let mounted = $state(false);
-	let location = $derived($storedLocation);
 
+	// Deliberately a client-side redirect, not one from `load`: this page is
+	// prerendered, so a redirect resolved at build time would bake in the base
+	// locale and every visitor would land on English. Deciding it here lets the
+	// locale strategy read the URL, the cookie and finally the browser's own
+	// languages before choosing.
 	onMount(() => {
-		mounted = true;
+		goto(localizeHref('/weather/week/'), { replaceState: true });
 	});
-
-	const features = [
-		{
-			title: 'Week Prediction',
-			description:
-				'Get detailed hourly weather forecasts for the next 7 days with interactive charts and temperature gradients.',
-			href: `/weather`,
-			icon: 'calendar',
-			gradient: 'from-blue-500 to-cyan-500'
-		},
-		{
-			title: 'Model Comparison',
-			description:
-				'Compare multiple weather models side-by-side to understand forecast uncertainty and accuracy.',
-			href: '/weather/compare',
-			icon: 'trending-up',
-			gradient: 'from-purple-500 to-pink-500'
-		},
-		{
-			title: '14 Day Weather',
-			description:
-				'Extended forecast with ensemble model spreads showing temperature ranges and uncertainty.',
-			href: '/weather/14-day',
-			icon: 'cloud',
-			gradient: 'from-green-500 to-blue-500'
-		}
-	];
 </script>
-
-<svelte:head>
-	<title>Open-Meteo Weather - Advanced Weather Forecasting</title>
-	<meta
-		name="description"
-		content="Professional weather forecasting with multiple models, extended forecasts, and detailed comparisons. Powered by Open-Meteo API."
-	/>
-</svelte:head>
-
-<div
-	class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900"
->
-	<!-- Hero Section -->
-	<div class="container mx-auto px-6 pt-20 pb-16">
-		{#if mounted}
-			<div class="mb-16 text-center" in:fade={{ duration: 800, delay: 200 }}>
-				<h1
-					class="mb-6 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-5xl font-bold text-transparent md:text-7xl"
-				>
-					Open-Meteo Weather
-				</h1>
-				<p class="mx-auto mb-8 max-w-3xl text-xl text-gray-600 md:text-2xl dark:text-gray-300">
-					Professional weather forecasting with advanced models, detailed comparisons, and extended
-					predictions
-				</p>
-
-				<!-- Quick Access Button -->
-				<div in:fly={{ y: 20, duration: 600, delay: 600 }}>
-					<Button
-						href="/weather"
-						size="lg"
-						class="bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3 text-lg text-white shadow-lg transition-all duration-300 hover:from-blue-700 hover:to-purple-700 hover:shadow-xl"
-					>
-						View Current Weather
-						<svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M13 7l5 5m0 0l-5 5m5-5H6"
-							/>
-						</svg>
-					</Button>
-				</div>
-			</div>
-		{/if}
-
-		<!-- Features Grid -->
-		<div class="mb-20 grid gap-8 md:grid-cols-3">
-			{#each features as feature, index (feature.title)}
-				{#if mounted}
-					<div in:fly={{ y: 30, duration: 600, delay: 300 + index * 150 }}>
-						<Card
-							class="h-full border-0 bg-white/80 shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:bg-gray-800/80"
-						>
-							<CardHeader>
-								<div
-									class="h-12 w-12 rounded-xl bg-gradient-to-r {feature.gradient} mb-4 flex items-center justify-center"
-								>
-									{#if feature.icon === 'calendar'}
-										<svg
-											class="h-6 w-6 text-white"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-											/>
-										</svg>
-									{:else if feature.icon === 'trending-up'}
-										<svg
-											class="h-6 w-6 text-white"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
-											/>
-										</svg>
-									{:else if feature.icon === 'cloud'}
-										<svg
-											class="h-6 w-6 text-white"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
-											/>
-										</svg>
-									{/if}
-								</div>
-								<CardTitle class="mb-2 text-xl">{feature.title}</CardTitle>
-								<CardDescription class="text-gray-600 dark:text-gray-300">
-									{feature.description}
-								</CardDescription>
-							</CardHeader>
-							<CardContent class="pt-0">
-								<Button
-									href={feature.href}
-									variant="outline"
-									class="w-full hover:bg-gradient-to-r hover:{feature.gradient} transition-all duration-300 hover:border-transparent hover:text-white"
-								>
-									Explore {feature.title}
-								</Button>
-							</CardContent>
-						</Card>
-					</div>
-				{/if}
-			{/each}
-		</div>
-
-		<!-- Current Weather for Selected Location -->
-		{#if mounted && location}
-			<div class="mx-auto max-w-2xl" in:fade={{ duration: 600, delay: 800 }}>
-				<Card
-					class="border-blue-200 bg-gradient-to-r from-blue-500/10 to-purple-500/10 dark:border-blue-700"
-				>
-					<CardHeader>
-						<CardTitle class="text-center text-2xl">
-							Current Location: {location.name}
-						</CardTitle>
-						<CardDescription class="text-center">
-							{location.country} • {location.latitude?.toFixed(2)}°, {location.longitude?.toFixed(
-								2
-							)}°
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="text-center">
-						<Button href="/weather" variant="default" class="bg-blue-600 hover:bg-blue-700">
-							View Detailed Forecast
-						</Button>
-					</CardContent>
-				</Card>
-			</div>
-		{/if}
-	</div>
-
-	<!-- Features Overview Section -->
-	<div class="bg-white/50 py-20 dark:bg-gray-800/50">
-		<div class="container mx-auto px-6">
-			{#if mounted}
-				<div class="mb-16 text-center" in:fade={{ duration: 600, delay: 1000 }}>
-					<h2 class="mb-4 text-4xl font-bold text-gray-800 dark:text-white">
-						Why Choose Our Weather Service?
-					</h2>
-					<p class="mx-auto max-w-2xl text-xl text-gray-600 dark:text-gray-300">
-						Powered by Open-Meteo API with multiple weather models and advanced visualization
-					</p>
-				</div>
-
-				<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-					{#each [{ title: 'Multiple Models', desc: 'Compare ECMWF, GFS, and more', icon: 'layers' }, { title: 'Extended Forecasts', desc: 'Up to 14 days ahead', icon: 'clock' }, { title: 'Interactive Charts', desc: 'Highcharts visualization', icon: 'bar-chart' }, { title: 'Real-time Data', desc: 'Always up-to-date', icon: 'refresh' }] as feature, index (feature.title)}
-						<div class="text-center" in:fly={{ y: 20, duration: 500, delay: 1200 + index * 100 }}>
-							<div
-								class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-purple-500"
-							>
-								<svg
-									class="h-8 w-8 text-white"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									{#if feature.icon === 'layers'}
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-										/>
-									{:else if feature.icon === 'clock'}
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-										/>
-									{:else if feature.icon === 'bar-chart'}
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-										/>
-									{:else if feature.icon === 'refresh'}
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-										/>
-									{/if}
-								</svg>
-							</div>
-							<h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white">
-								{feature.title}
-							</h3>
-							<p class="text-gray-600 dark:text-gray-300">{feature.desc}</p>
-						</div>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style>
-	:global(.container) {
-		max-width: 1200px;
-	}
-</style>

src/routes/about/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import LocalizedContent from '$lib/components/localized-content.svelte';
+
+	import de from './content/de.svelte';
+	import en from './content/en.svelte';
+	import es from './content/es.svelte';
+	import fr from './content/fr.svelte';
+	import it from './content/it.svelte';
+</script>
+
+<LocalizedContent variants={{ en, de, es, fr, it }} />

src/routes/about/content/de.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Über Drizz.li" subtitle="Eine kleine, quelloffene Wetterseite.">
+	<p>
+		Drizz.li ist eine unabhängige Wetterseite. Sie zeigt Vorhersagen mehrerer Modelle,
+		Modellvergleiche, 14-Tage-Aussichten, Wetterkarten und historisches Wetter - ohne Konten,
+		Werbung oder Tracker.
+	</p>
+
+	<h2>So funktioniert es</h2>
+	<p>
+		Alle Wetterdaten stammen aus den hervorragenden Open-Data-Schnittstellen von
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, die nationale
+		Wetterdienste bündeln (DWD, NOAA, Météo-France, MeteoSchweiz und weitere). Drizz.li ist eine
+		statische Seite: Die Vorhersagen werden direkt von Ihrem Browser abgerufen und auf Ihrem Gerät
+		dargestellt.
+	</p>
+	<p>
+		Die Seite ist quelloffen. Jede und jeder kann den Code lesen, Fehler melden oder Verbesserungen
+		beitragen.
+	</p>
+
+	<h2>Das Projekt unterstützen</h2>
+	<p>
+		Drizz.li ist kostenlos nutzbar. Wenn es Ihnen nützt, können Sie es mit einem kleinen monatlichen
+		Beitrag unterstützen (ab 3 € / Monat) - das hilft, Domain, Hosting und Entwicklungszeit zu
+		decken. Als Dankeschön schalten Unterstützerinnen und Unterstützer die Extras frei: historisches
+		Wetter mit Vergleich zu den Klimanormalen sowie neue Funktionen, sobald sie erscheinen.
+	</p>
+	<p>
+		Beiträge laufen über eine einfache Banküberweisung - kein Zahlungsdienstleister, keine
+		gespeicherten Kartendaten. Wie das genau abläuft, steht in den
+		<a href={href('/legal/terms')}>Unterstützerbedingungen</a> und in der
+		<a href={href('/legal/privacy')}>Datenschutzerklärung</a>.
+	</p>
+
+	<h2>Kontakt</h2>
+	<p>
+		Fragen, Rückmeldungen oder Fehlerberichte:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+</ProsePage>

src/routes/about/content/en.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="About Drizz.li" subtitle="A small, open-source weather site.">
+	<p>
+		Drizz.li is an independent weather site. It shows multi-model forecasts, model comparisons,
+		14-day outlooks, weather maps and historical weather - without accounts, ads or trackers.
+	</p>
+
+	<h2>How it works</h2>
+	<p>
+		All weather data comes from the excellent open-data APIs of
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, which aggregates
+		national weather services (DWD, NOAA, Météo-France, MeteoSwiss and more). Drizz.li is a static
+		site: forecasts are fetched directly by your browser and rendered on your device.
+	</p>
+	<p>
+		The site is open source. Anyone can read the code, report issues or contribute improvements.
+	</p>
+
+	<h2>Supporting the project</h2>
+	<p>
+		Drizz.li is free to use. If you find it useful, you can support it with a small monthly
+		contribution (from €3 / month) - it helps cover the domain, hosting and development time. As a
+		thank-you, supporters unlock the extras: historical weather with climate-normal comparisons, and
+		new supporter features as they land.
+	</p>
+	<p>
+		Contributions are handled by a simple bank transfer - no payment processor, no stored card
+		details. The details of how that works are in the
+		<a href={href('/legal/terms')}>supporter terms</a> and the
+		<a href={href('/legal/privacy')}>privacy policy</a>.
+	</p>
+
+	<h2>Contact</h2>
+	<p>
+		Questions, feedback or bug reports:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+</ProsePage>

src/routes/about/content/es.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Sobre Drizz.li" subtitle="Un pequeño sitio meteorológico de código abierto.">
+	<p>
+		Drizz.li es un sitio meteorológico independiente. Muestra pronósticos de varios modelos,
+		comparaciones entre modelos, previsiones a 14 días, mapas meteorológicos y datos históricos, sin
+		cuentas, sin anuncios y sin rastreadores.
+	</p>
+
+	<h2>Cómo funciona</h2>
+	<p>
+		Todos los datos proceden de las excelentes API de datos abiertos de
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, que agrega los
+		servicios meteorológicos nacionales (DWD, NOAA, Météo-France, MeteoSwiss y más). Drizz.li es un
+		sitio estático: tu navegador descarga los pronósticos directamente y los representa en tu
+		dispositivo.
+	</p>
+	<p>
+		El sitio es de código abierto. Cualquiera puede leer el código, informar de errores o contribuir
+		con mejoras.
+	</p>
+
+	<h2>Apoyar el proyecto</h2>
+	<p>
+		Drizz.li es gratuito. Si te resulta útil, puedes apoyarlo con una pequeña aportación mensual
+		(desde 3 € al mes): ayuda a cubrir el dominio, el alojamiento y el tiempo de desarrollo. Como
+		agradecimiento, quienes colaboran desbloquean los extras: clima histórico con comparación frente
+		a las normales climáticas y las nuevas funciones que vayan llegando.
+	</p>
+	<p>
+		Las aportaciones se gestionan mediante una simple transferencia bancaria: sin pasarela de pago y
+		sin guardar datos de tarjetas. Los detalles están en las
+		<a href={href('/legal/terms')}>condiciones para colaboradores</a> y en la
+		<a href={href('/legal/privacy')}>política de privacidad</a>.
+	</p>
+
+	<h2>Contacto</h2>
+	<p>
+		Dudas, comentarios o informes de errores:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+</ProsePage>

src/routes/about/content/fr.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="À propos de Drizz.li" subtitle="Un petit site météo open source.">
+	<p>
+		Drizz.li est un site météo indépendant. Il propose des prévisions multi-modèles, des
+		comparaisons de modèles, des tendances à 14 jours, des cartes météo et des données historiques,
+		sans compte, sans publicité et sans traceurs.
+	</p>
+
+	<h2>Comment ça marche</h2>
+	<p>
+		Toutes les données proviennent des excellentes API ouvertes d'<a
+			href="https://open-meteo.com"
+			target="_blank"
+			rel="noopener">Open-Meteo</a
+		>, qui agrègent les services météorologiques nationaux (DWD, NOAA, Météo-France, MeteoSwiss et
+		d'autres). Drizz.li est un site statique : les prévisions sont récupérées directement par votre
+		navigateur et affichées sur votre appareil.
+	</p>
+	<p>
+		Le site est open source. Chacun peut lire le code, signaler un problème ou proposer des
+		améliorations.
+	</p>
+
+	<h2>Soutenir le projet</h2>
+	<p>
+		Drizz.li est gratuit. S'il vous est utile, vous pouvez le soutenir par une petite contribution
+		mensuelle (à partir de 3 € par mois) : elle aide à couvrir le nom de domaine, l'hébergement et
+		le temps de développement. En remerciement, les contributeurs débloquent les bonus : la météo
+		historique avec comparaison aux normales climatiques, ainsi que les nouvelles fonctions à venir.
+	</p>
+	<p>
+		Les contributions passent par un simple virement bancaire : aucun prestataire de paiement,
+		aucune donnée de carte conservée. Le détail figure dans les
+		<a href={href('/legal/terms')}>conditions contributeur</a> et dans la
+		<a href={href('/legal/privacy')}>politique de confidentialité</a>.
+	</p>
+
+	<h2>Contact</h2>
+	<p>
+		Questions, retours ou signalements de bugs :
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+</ProsePage>

src/routes/about/content/it.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Informazioni su Drizz.li" subtitle="Un piccolo sito meteo open source.">
+	<p>
+		Drizz.li è un sito meteo indipendente. Offre previsioni multi-modello, confronti tra modelli,
+		tendenze a 14 giorni, mappe meteo e dati storici, senza account, senza pubblicità e senza
+		tracciatori.
+	</p>
+
+	<h2>Come funziona</h2>
+	<p>
+		Tutti i dati provengono dalle ottime API aperte di
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, che aggregano i
+		servizi meteorologici nazionali (DWD, NOAA, Météo-France, MeteoSwiss e altri). Drizz.li è un
+		sito statico: le previsioni vengono scaricate direttamente dal tuo browser e disegnate sul tuo
+		dispositivo.
+	</p>
+	<p>
+		Il sito è open source. Chiunque può leggere il codice, segnalare problemi o contribuire con
+		miglioramenti.
+	</p>
+
+	<h2>Sostenere il progetto</h2>
+	<p>
+		Drizz.li è gratuito. Se lo trovi utile, puoi sostenerlo con un piccolo contributo mensile (da 3
+		€ al mese): aiuta a coprire dominio, hosting e tempo di sviluppo. Come ringraziamento, chi
+		sostiene il progetto sblocca gli extra: meteo storico con confronto rispetto alle normali
+		climatiche e le nuove funzioni man mano che arrivano.
+	</p>
+	<p>
+		I contributi avvengono con un semplice bonifico bancario: nessun gestore di pagamenti, nessun
+		dato della carta conservato. I dettagli sono nelle
+		<a href={href('/legal/terms')}>condizioni per i sostenitori</a> e nell'<a
+			href={href('/legal/privacy')}>informativa sulla privacy</a
+		>.
+	</p>
+
+	<h2>Contatti</h2>
+	<p>
+		Domande, riscontri o segnalazioni di bug:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+</ProsePage>

src/routes/layout.css

@@ -6,71 +6,75 @@
 
 :root {
 	--radius: 0.625rem;
-	--background: oklch(1 0 0);
+	--background: oklch(0.985 0.002 90);
-	--foreground: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.205 0.02 60);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
+	--card-foreground: oklch(0.205 0.02 60);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.129 0.042 264.695);
+	--popover-foreground: oklch(0.205 0.02 60);
-	--primary: oklch(0.208 0.042 265.755);
+	--primary: oklch(0.65 0.17 55);
-	--primary-foreground: oklch(0.984 0.003 247.858);
+	--primary-foreground: oklch(1 0 0);
-	--secondary: oklch(0.968 0.007 247.896);
+	--secondary: oklch(0.965 0.01 85);
-	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--secondary-foreground: oklch(0.25 0.02 60);
-	--muted: oklch(0.968 0.007 247.896);
+	--muted: oklch(0.96 0.008 85);
-	--muted-foreground: oklch(0.554 0.046 257.417);
+	--muted-foreground: oklch(0.5 0.02 60);
-	--accent: oklch(0.968 0.007 247.896);
+	--accent: oklch(0.95 0.02 70);
-	--accent-foreground: oklch(0.208 0.042 265.755);
+	--accent-foreground: oklch(0.25 0.02 60);
 	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.929 0.013 255.508);
+	--border: oklch(0.91 0.01 80);
-	--input: oklch(0.929 0.013 255.508);
+	--input: oklch(0.91 0.01 80);
-	--ring: oklch(0.704 0.04 256.788);
+	--ring: oklch(0.65 0.17 55);
-	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-1: oklch(0.65 0.17 55);
-	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-2: oklch(0.62 0.16 250);
-	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-3: oklch(0.75 0.15 75);
-	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-4: oklch(0.55 0.12 250);
-	--chart-5: oklch(0.769 0.188 70.08);
+	--chart-5: oklch(0.8 0.14 65);
-	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.3 0.02 60);
-	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.65 0.17 55);
-	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(1 0 0);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.95 0.03 70);
-	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.3 0.02 60);
-	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.92 0.01 80);
-	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.65 0.17 55);
-	--sidebar-ring: oklch(0.704 0.04 256.788);
+	--sidebar: oklch(0.99 0.003 85);
+	--topbar-bg: oklch(1 0 0);
+	--topbar-border: oklch(0.92 0.01 80);
 }
 
 .dark {
-	--background: oklch(0.129 0.042 264.695);
+	--background: oklch(0.17 0.015 60);
-	--foreground: oklch(0.984 0.003 247.858);
+	--foreground: oklch(0.96 0.005 85);
-	--card: oklch(0.208 0.042 265.755);
+	--card: oklch(0.22 0.015 60);
-	--card-foreground: oklch(0.984 0.003 247.858);
+	--card-foreground: oklch(0.96 0.005 85);
-	--popover: oklch(0.208 0.042 265.755);
+	--popover: oklch(0.22 0.015 60);
-	--popover-foreground: oklch(0.984 0.003 247.858);
+	--popover-foreground: oklch(0.96 0.005 85);
-	--primary: oklch(0.929 0.013 255.508);
+	--primary: oklch(0.72 0.17 55);
-	--primary-foreground: oklch(0.208 0.042 265.755);
+	--primary-foreground: oklch(0.15 0.02 60);
-	--secondary: oklch(0.279 0.041 260.031);
+	--secondary: oklch(0.26 0.015 60);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--secondary-foreground: oklch(0.96 0.005 85);
-	--muted: oklch(0.279 0.041 260.031);
+	--muted: oklch(0.26 0.015 60);
-	--muted-foreground: oklch(0.704 0.04 256.788);
+	--muted-foreground: oklch(0.65 0.02 60);
-	--accent: oklch(0.279 0.041 260.031);
+	--accent: oklch(0.65 0.16 250);
-	--accent-foreground: oklch(0.984 0.003 247.858);
+	--accent-foreground: oklch(0.96 0.005 85);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.551 0.027 264.364);
+	--ring: oklch(0.72 0.17 55);
-	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-1: oklch(0.72 0.17 55);
-	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-2: oklch(0.65 0.16 250);
-	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-3: oklch(0.8 0.14 65);
-	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-4: oklch(0.6 0.2 300);
-	--chart-5: oklch(0.645 0.246 16.439);
+	--chart-5: oklch(0.7 0.22 20);
-	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.96 0.005 85);
-	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.72 0.17 55);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.15 0.02 60);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.26 0.02 55);
-	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.96 0.005 85);
-	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
 	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
+	--sidebar-ring: oklch(0.72 0.17 55);
+	--sidebar: oklch(0.19 0.015 60);
+	--topbar-bg: oklch(0.2 0.015 60);
+	--topbar-border: oklch(1 0 0 / 10%);
 }
 
 @theme inline {
@@ -109,13 +113,137 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--color-topbar: var(--topbar-bg);
+	--color-topbar-border: var(--topbar-border);
 }
 
 @layer base {
+	/* color-scheme drives native widgets AND propagates into embedded
+	   iframes (the open-meteo map reads it via prefers-color-scheme) */
+	:root {
+		color-scheme: light;
+	}
+	.dark {
+		color-scheme: dark;
+	}
 	* {
 		@apply border-border outline-ring/50;
 	}
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	/* Page cross-fade: driven from routes/+layout.svelte, revealed when the new
+	   page reports its data has arrived. */
+	.page-fade {
+		transition: opacity 320ms ease;
+	}
+	.page-fade-hidden {
+		opacity: 0;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.page-fade {
+			transition: none;
+		}
+		.page-fade-hidden {
+			opacity: 1;
+		}
+	}
+
+	/* ── Day switching ────────────────────────────────────────────────────────
+	   Only the three regions whose content depends on the selected day take part
+	   in the cross-fade. Everything else keeps its pixels: the `day-switch`
+	   class cancels the root animation, so the strip, header and page chrome do
+	   not so much as flicker while the table, summary and charts swap over. */
+	:root.day-switch .day-region-table {
+		view-transition-name: day-table;
+	}
+	:root.day-switch .day-region-summary {
+		view-transition-name: day-summary;
+	}
+	:root.day-switch .day-region-charts {
+		view-transition-name: day-charts;
+	}
+
+	/* The sticky day strip never changes during a day switch, but it has to be
+	   captured too: view-transition snapshots all paint in one layer above the
+	   page, so without its own group (and a higher z-index in that layer) the
+	   fading table and charts would slide over the top of it. */
+	:root.day-switch .daystrip {
+		view-transition-name: daystrip;
+	}
+	::view-transition-group(daystrip) {
+		z-index: 20;
+	}
+
+	/* Same for the topbar: a captured region's snapshot is painted at its layout
+	   position, including the part normally scrolled up behind the chrome. */
+	:root.day-switch .topbar {
+		view-transition-name: topbar;
+	}
+	::view-transition-group(topbar) {
+		z-index: 30;
+	}
+
+	::view-transition-old(day-table),
+	::view-transition-new(day-table),
+	::view-transition-old(day-summary),
+	::view-transition-new(day-summary),
+	::view-transition-old(day-charts),
+	::view-transition-new(day-charts) {
+		animation-duration: 420ms;
+		animation-timing-function: ease;
+	}
+
+	:root.day-switch::view-transition-old(root),
+	:root.day-switch::view-transition-new(root) {
+		animation: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.day-region-table,
+		.day-region-summary,
+		.day-region-charts,
+		.daystrip,
+		.topbar {
+			view-transition-name: none;
+		}
+	}
+
+	/* Theme changes cross-fade the whole document in one pass (see
+	   routes/+layout.svelte). Doing it as a view transition instead of a blanket
+	   `* { transition }` matters: that blanket rule also stretched every
+	   component's own hover and focus transitions to 400ms for the duration of
+	   the switch, which read as lag on interactive controls. */
+	::view-transition-old(root),
+	::view-transition-new(root) {
+		animation-duration: 400ms;
+		animation-timing-function: ease;
+	}
+
+	/* Fallback for browsers without view transitions: fade the colours only. */
+	:root.theme-transition,
+	:root.theme-transition *,
+	:root.theme-transition *::before,
+	:root.theme-transition *::after {
+		transition:
+			background-color 400ms ease,
+			border-color 400ms ease,
+			color 400ms ease,
+			fill 400ms ease,
+			stroke 400ms ease;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		::view-transition-old(root),
+		::view-transition-new(root) {
+			animation: none;
+		}
+		:root.theme-transition,
+		:root.theme-transition *,
+		:root.theme-transition *::before,
+		:root.theme-transition *::after {
+			transition: none;
+		}
+	}
 }

src/routes/legal/imprint/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import LocalizedContent from '$lib/components/localized-content.svelte';
+
+	import de from './content/de.svelte';
+	import en from './content/en.svelte';
+	import es from './content/es.svelte';
+	import fr from './content/fr.svelte';
+	import it from './content/it.svelte';
+</script>
+
+<LocalizedContent variants={{ en, de, es, fr, it }} />

src/routes/legal/imprint/content/de.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Impressum" subtitle="Anbieterkennzeichnung.">
+	<h2>Diensteanbieter</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2<br />
+		CH-6442 Gersau<br />
+		Switzerland
+	</address>
+	<p>
+		E-Mail: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+	<p>Drizz.li wird als persönliches, unabhängiges Projekt betrieben.</p>
+
+	<h2>Haftungsausschluss</h2>
+	<p>
+		Die hier gezeigten Wetterdaten dienen ausschliesslich der allgemeinen Information. Vorhersagen
+		sind naturgemäss unsicher; verlassen Sie sich nicht auf sie, wenn Leben, Gesundheit oder
+		Sachwerte auf dem Spiel stehen - massgeblich sind die amtlichen Warnungen Ihres nationalen
+		Wetterdienstes.
+	</p>
+	<p>
+		Wetter- und Geodaten stammen von
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, das nicht mit
+		dieser Seite verbunden ist. Externe Links werden nach bestem Wissen gesetzt; für deren Inhalte
+		sind die jeweiligen Betreiber verantwortlich.
+	</p>
+	<p class="text-muted-foreground">Massgeblich ist die englische Fassung dieses Impressums.</p>
+</ProsePage>

src/routes/legal/imprint/content/en.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Imprint" subtitle="Legal notice / provider identification.">
+	<h2>Service provider</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2<br />
+		CH-6442 Gersau<br />
+		Switzerland
+	</address>
+	<p>
+		Email: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+	<p>Drizz.li is operated as a personal, independent project.</p>
+
+	<h2>Disclaimer</h2>
+	<p>
+		Weather data shown on this site is provided for general information only. Forecasts are
+		inherently uncertain; do not rely on them where life, health or property is at stake - consult
+		official warnings from your national weather service instead.
+	</p>
+	<p>
+		Weather and geodata are retrieved from
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, which is not
+		affiliated with this site. External links are provided in good faith; their content is the
+		responsibility of the respective operators.
+	</p>
+</ProsePage>

src/routes/legal/imprint/content/es.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Aviso legal" subtitle="Identificación del prestador del servicio.">
+	<h2>Prestador del servicio</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2<br />
+		CH-6442 Gersau<br />
+		Switzerland
+	</address>
+	<p>
+		Correo electrónico: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+	<p>Drizz.li se gestiona como un proyecto personal e independiente.</p>
+
+	<h2>Descargo de responsabilidad</h2>
+	<p>
+		Los datos meteorológicos de este sitio son solo informativos. Los pronósticos son
+		intrínsecamente inciertos; no confíes en ellos cuando estén en juego la vida, la salud o los
+		bienes: consulta los avisos oficiales de tu servicio meteorológico nacional.
+	</p>
+	<p>
+		Los datos meteorológicos y geográficos proceden de
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, que no está
+		afiliado a este sitio. Los enlaces externos se ofrecen de buena fe; su contenido es
+		responsabilidad de sus respectivos operadores.
+	</p>
+	<p class="text-muted-foreground">
+		En caso de discrepancia prevalece la versión inglesa de este aviso legal.
+	</p>
+</ProsePage>

src/routes/legal/imprint/content/fr.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Mentions légales" subtitle="Identification de l'éditeur.">
+	<h2>Éditeur du service</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2<br />
+		CH-6442 Gersau<br />
+		Switzerland
+	</address>
+	<p>
+		E-mail: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+	<p>Drizz.li est exploité comme un projet personnel et indépendant.</p>
+
+	<h2>Avertissement</h2>
+	<p>
+		Les données météo présentées ici sont fournies à titre d'information générale. Les prévisions
+		sont par nature incertaines ; ne vous y fiez pas lorsque des vies, la santé ou des biens sont en
+		jeu - consultez les alertes officielles de votre service météorologique national.
+	</p>
+	<p>
+		Les données météo et géographiques proviennent d'
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, qui n'est pas
+		affilié à ce site. Les liens externes sont fournis de bonne foi ; leur contenu relève de la
+		responsabilité de leurs exploitants.
+	</p>
+	<p class="text-muted-foreground">
+		En cas de divergence, la version anglaise de ces mentions fait foi.
+	</p>
+</ProsePage>

src/routes/legal/imprint/content/it.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Note legali" subtitle="Identificazione del fornitore del servizio.">
+	<h2>Fornitore del servizio</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2<br />
+		CH-6442 Gersau<br />
+		Switzerland
+	</address>
+	<p>
+		E-mail: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</p>
+	<p>Drizz.li è gestito come progetto personale e indipendente.</p>
+
+	<h2>Avvertenza</h2>
+	<p>
+		I dati meteo mostrati su questo sito hanno finalità puramente informative. Le previsioni sono
+		per natura incerte: non farvi affidamento quando sono in gioco la vita, la salute o i beni -
+		consulta gli avvisi ufficiali del tuo servizio meteorologico nazionale.
+	</p>
+	<p>
+		I dati meteo e geografici provengono da
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>, che non è
+		affiliato a questo sito. I link esterni sono forniti in buona fede; i contenuti sono
+		responsabilità dei rispettivi gestori.
+	</p>
+	<p class="text-muted-foreground">
+		In caso di discrepanza prevale la versione inglese di queste note legali.
+	</p>
+</ProsePage>

src/routes/legal/privacy/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import LocalizedContent from '$lib/components/localized-content.svelte';
+
+	import de from './content/de.svelte';
+	import en from './content/en.svelte';
+	import es from './content/es.svelte';
+	import fr from './content/fr.svelte';
+	import it from './content/it.svelte';
+</script>
+
+<LocalizedContent variants={{ en, de, es, fr, it }} />

src/routes/legal/privacy/content/de.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Datenschutzerklärung" subtitle="Zuletzt aktualisiert: 1. August 2026">
+	<p>
+		Drizz.li ist so gebaut, dass möglichst wenige Ihrer Daten nötig sind: keine Benutzerkonten,
+		keine Cookies, keine Werbung, keine Analyse- oder Tracking-Skripte. Diese Seite erklärt, welche
+		wenige Verarbeitung dennoch stattfindet - beim Besuch der Seite und wenn Sie das Projekt mit
+		einem Beitrag unterstützen.
+	</p>
+
+	<h2>1. Verantwortlicher</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
+		E-Mail:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</address>
+	<p>
+		Diese Erklärung gilt für die Websites drizz.li (die Wetter-App) und support.drizz.li (die
+		Unterstützer-Anmeldung).
+	</p>
+
+	<h2>2. Besuch der Website</h2>
+	<h3>Abruf der Wetterdaten</h3>
+	<p>
+		Drizz.li ist eine statische Seite: Wenn Sie eine Vorhersage öffnen, ruft Ihr Browser die
+		Wetterdaten direkt bei den Open-Data-Schnittstellen von
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>. Wie bei jeder
+		Webanfrage werden dabei Ihre IP-Adresse und der gewünschte Ort bzw. Suchbegriff an Open-Meteo
+		übertragen. Wir erhalten und speichern davon nichts. Siehe
+		<a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener"
+			>Nutzungs- und Datenschutzhinweise von Open-Meteo</a
+		>. Rechtsgrundlage: unser berechtigtes Interesse an der Auslieferung der angeforderten Inhalte
+		(Art. 6 Abs. 1 lit. f DSGVO).
+	</p>
+	<h3>Hosting</h3>
+	<p>
+		Die statische Seite wird von [Hosting-Anbieter, Standort] ausgeliefert. Die
+		Hosting-Infrastruktur kann kurzlebige technische Server-Logs (IP-Adresse, angefragte URL,
+		Zeitstempel) zu Sicherheits- und Betriebszwecken speichern. Rechtsgrundlage: berechtigtes
+		Interesse an einem sicheren, zuverlässigen Dienst (Art. 6 Abs. 1 lit. f DSGVO).
+	</p>
+	<h3>Einstellungen auf Ihrem Gerät (Local Storage)</h3>
+	<p>
+		Ihre Einstellungen - Design, Masseinheiten, zuletzt gesuchter Ort und (für Unterstützer) Ihr
+		Zugangsschlüssel samt letztem Prüfergebnis - werden ausschliesslich im Local Storage Ihres
+		Browsers gespeichert. Sie verlassen Ihr Gerät nicht, ausser wie unten für die Schlüsselprüfung
+		beschrieben, und Sie können sie jederzeit über Ihren Browser löschen.
+	</p>
+
+	<h2>3. Das Projekt unterstützen (Beiträge)</h2>
+	<p>
+		Unterstützerbeiträge schalten die Extras frei, rechtlich sind sie daher eine entgeltliche
+		Vereinbarung und keine reine Schenkung - das verarbeiten wir zur Abwicklung:
+	</p>
+	<h3>Anmeldeformular</h3>
+	<ul>
+		<li>
+			<strong>E-Mail-Adresse</strong> (erforderlich) - um Ihnen die Überweisungsdaten und nach Eingang
+			Ihres Beitrags den Zugangsschlüssel zu senden.
+		</li>
+		<li><strong>Name</strong> (optional) - zur leichteren Zuordnung Ihrer Überweisung.</li>
+		<li>
+			<strong>Währung und Betrag</strong> - anhand der Spracheinstellung/Zeitzone Ihres Browsers auf Ihrem
+			Gerät ermittelt (keine Standortabfrage).
+		</li>
+		<li>
+			<strong>IP-Adresse und technische Anti-Bot-Signale</strong> - zusammen mit der Anfrage gespeichert,
+			um Missbrauch und Spam zu verhindern.
+		</li>
+		<li>
+			<strong>Zahlungsreferenz</strong> (z. B. DRZ-XXXXXX) - je Anfrage erzeugt, um Ihre Überweisung Ihrer
+			Anmeldung zuzuordnen.
+		</li>
+	</ul>
+	<p>
+		Die Überweisungsdaten (Bankverbindung und Referenz) senden wir Ihnen per E-Mail statt sie auf
+		der Seite anzuzeigen. Rechtsgrundlagen: Erfüllung der Vereinbarung (Art. 6 Abs. 1 lit. b DSGVO)
+		und für die Missbrauchsabwehr berechtigtes Interesse (Art. 6 Abs. 1 lit. f DSGVO).
+	</p>
+	<h3>Banküberweisung</h3>
+	<p>
+		Beiträge werden per gewöhnlicher Banküberweisung gezahlt. Ihre und unsere Bank verarbeiten die
+		Überweisungsdaten in eigener Verantwortung; auf unserem Kontoauszug sehen wir die üblichen
+		Angaben (Name, Kontonummer, Betrag, Referenz). Wir nutzen sie nur zur Zuordnung Ihres Beitrags
+		und sind nach handels- und steuerrechtlichen Vorschriften zur Aufbewahrung verpflichtet (Art. 6
+		Abs. 1 lit. c DSGVO).
+	</p>
+	<h3>Zugangsschlüssel und Prüfung</h3>
+	<p>
+		Nach Zuordnung Ihrer Überweisung (manuell, meist innerhalb von 24 Stunden) erhalten Sie den
+		Zugangsschlüssel per E-Mail. Wenn Sie ihn in Drizz.li einfügen, sendet Ihr Browser den Schlüssel
+		an unseren Prüfendpunkt (support.drizz.li), um seine Gültigkeit zu prüfen; die Antwort enthält
+		nur Gültigkeit, Stufe und Ablauf. Die Abonnentenliste (Schlüssel, E-Mail, Ablauf) liegt auf
+		unserem Server, solange Ihr Zugang aktiv ist.
+	</p>
+	<h3>E-Mail</h3>
+	<p>
+		Transaktions-E-Mails (Überweisungsdaten, Zugangsschlüssel, Verlängerungen) versenden wir über
+		unseren E-Mail-Anbieter Strato (Strato AG, Deutschland) als Auftragsverarbeiter. Newsletter oder
+		Werbe-E-Mails versenden wir nicht.
+	</p>
+
+	<h2>4. Speicherdauer</h2>
+	<ul>
+		<li>Nicht bezahlte Anmeldungen werden spätestens nach 6 Monaten gelöscht.</li>
+		<li>
+			Unterstützerdaten (Schlüssel, E-Mail, Ablauf) werden für die Dauer Ihres Zugangs aufbewahrt
+			und innerhalb von 12 Monaten nach dessen Ablauf gelöscht, sofern Sie keine frühere Löschung
+			wünschen.
+		</li>
+		<li>
+			Buchhaltungsunterlagen (Kontoauszüge mit Ihrer Überweisung) werden für die gesetzliche
+			Aufbewahrungsfrist gespeichert (je nach Rechtsordnung bis zu 10 Jahre).
+		</li>
+	</ul>
+
+	<h2>5. Empfänger</h2>
+	<p>
+		Wir verkaufen personenbezogene Daten nicht und geben sie nicht für eigene Zwecke Dritter weiter.
+		Empfänger sind ausschliesslich: Open-Meteo (Wetterabrufe direkt durch Ihren Browser), unser
+		Hosting-Anbieter, unser E-Mail-Anbieter (Strato) und die an der Überweisung beteiligten Banken.
+	</p>
+
+	<h2>6. Ihre Rechte</h2>
+	<p>
+		Nach der DSGVO haben Sie das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der
+		Verarbeitung, Datenübertragbarkeit sowie das Recht, einer auf berechtigtem Interesse beruhenden
+		Verarbeitung zu widersprechen. Beruht eine Verarbeitung auf Einwilligung, können Sie diese
+		jederzeit widerrufen. Zur Ausübung schreiben Sie an
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>. Ausserdem haben
+		Sie das Recht, sich bei einer Aufsichtsbehörde zu beschweren, insbesondere im EU-Mitgliedstaat
+		Ihres Wohnsitzes, oder bei [zuständige Aufsichtsbehörde des Verantwortlichen].
+	</p>
+	<p>
+		Für Besucherinnen und Besucher aus der Schweiz gelten die entsprechenden Rechte nach dem
+		Bundesgesetz über den Datenschutz (DSG) sinngemäss.
+	</p>
+
+	<h2>7. Änderungen</h2>
+	<p>
+		Wir aktualisieren diese Erklärung, wenn sich der Dienst ändert; das Datum oben nennt die letzte
+		Fassung.
+	</p>
+	<p class="text-muted-foreground">
+		Massgeblich ist die englische Fassung dieser Datenschutzerklärung.
+	</p>
+</ProsePage>

src/routes/legal/privacy/content/en.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Privacy policy" subtitle="Last updated: 1 August 2026">
+	<p>
+		Drizz.li is built to need as little of your data as possible: there are no user accounts, no
+		cookies, no advertising and no analytics or tracking scripts. This page explains what little
+		processing does happen - when you browse the site, and when you support the project with a
+		contribution.
+	</p>
+
+	<h2>1. Controller</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
+		Email:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</address>
+	<p>
+		This policy covers the websites drizz.li (the weather app) and support.drizz.li (the supporter
+		signup page).
+	</p>
+
+	<h2>2. Browsing the site</h2>
+	<h3>Weather data requests</h3>
+	<p>
+		Drizz.li is a static site: when you open a forecast, your browser fetches the weather data
+		directly from the open-data APIs of
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>
+		(api.open-meteo.com, geocoding-api.open-meteo.com, archive-api.open-meteo.com, ensemble-api.open-meteo.com,
+		and map tiles from maps.open-meteo.com / map-tiles.open-meteo.com / map-assets.open-meteo.com). Like
+		any web request, this transmits your IP address and the requested location or search term to Open-Meteo.
+		We do not receive or store any of this. See
+		<a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener"
+			>Open-Meteo's terms and privacy information</a
+		>. Legal basis: our legitimate interest in delivering the content you request (Art. 6(1)(f)
+		GDPR).
+	</p>
+	<h3>Hosting</h3>
+	<p>
+		The static site is served by [hosting provider, location]. The hosting infrastructure may keep
+		short-lived technical server logs (IP address, requested URL, timestamp) for security and
+		operations. Legal basis: legitimate interest in a secure, reliable service (Art. 6(1)(f) GDPR).
+	</p>
+	<h3>Settings on your device (local storage)</h3>
+	<p>
+		Your preferences - theme, measurement units, last searched location, and (for supporters) your
+		access key and its last verification result - are stored only in your browser's local storage.
+		They never leave your device except as described below for key verification, and you can clear
+		them at any time via your browser.
+	</p>
+
+	<h2>3. Supporting the project (contributions)</h2>
+	<p>
+		Supporter contributions unlock the supporter extras, so legally they are a paid agreement, not a
+		pure gift - and this is what we process to handle them:
+	</p>
+	<h3>Signup form</h3>
+	<ul>
+		<li>
+			<strong>Email address</strong> (required) - to send you the transfer details and, after your contribution
+			arrives, your access key.
+		</li>
+		<li><strong>Name</strong> (optional) - to help match your bank transfer.</li>
+		<li>
+			<strong>Currency and amount</strong> - shown based on your browser's locale/timezone, detected on
+			your device (no geolocation request is made).
+		</li>
+		<li>
+			<strong>IP address and technical anti-bot signals</strong> - kept with the signup request to prevent
+			abuse and spam of the form.
+		</li>
+		<li>
+			<strong>Payment reference</strong> (e.g. DRZ-XXXXXX) - generated per request to match your transfer
+			to your signup.
+		</li>
+	</ul>
+	<p>
+		The transfer details (bank account and reference) are sent to you by email rather than shown on
+		the page. Legal bases: performance of the agreement (Art. 6(1)(b) GDPR) and, for the anti-abuse
+		measures, legitimate interest (Art. 6(1)(f) GDPR).
+	</p>
+	<h3>Bank transfer</h3>
+	<p>
+		Contributions are paid by ordinary bank transfer. Your bank and ours process the transfer data
+		under their own responsibility; on our bank statement we see the usual transfer details (your
+		name, account number, amount, reference). We use them only to match your contribution and are
+		required to retain accounting records under statutory bookkeeping and tax law (Art. 6(1)(c)
+		GDPR).
+	</p>
+	<h3>Access key and verification</h3>
+	<p>
+		After your transfer is matched (manually, usually within 24 hours), you receive an access key by
+		email. When you paste it into Drizz.li, your browser sends the key to our verification endpoint
+		(support.drizz.li) to check whether it is active; the response contains only the validity, tier
+		and expiry. The subscriber list (key, email, expiry) is stored on our server for as long as your
+		access is active.
+	</p>
+	<h3>Email</h3>
+	<p>
+		Transactional emails (transfer details, access key, renewals) are sent through our email
+		provider, Strato (Strato AG, Germany), acting as a processor. We send no newsletters or
+		marketing email.
+	</p>
+
+	<h2>4. Retention</h2>
+	<ul>
+		<li>Signup requests that are never paid are deleted after 6 months at the latest.</li>
+		<li>
+			Supporter records (key, email, expiry) are kept while your access is active and deleted within
+			12 months after it expires, unless you ask us to delete them sooner.
+		</li>
+		<li>
+			Accounting records (bank statements showing your transfer) are kept for the statutory
+			retention period (up to 10 years, depending on jurisdiction).
+		</li>
+	</ul>
+
+	<h2>5. Recipients</h2>
+	<p>
+		We do not sell or share personal data with third parties for their own purposes. Recipients are
+		limited to: Open-Meteo (weather requests made directly by your browser), our hosting provider,
+		our email provider (Strato), and the banks involved in your transfer.
+	</p>
+
+	<h2>6. Your rights</h2>
+	<p>
+		Under the GDPR you have the right to access, rectification, erasure, restriction of processing,
+		data portability, and to object to processing based on legitimate interest. Where processing is
+		based on consent, you may withdraw it at any time. To exercise any of these rights, email
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>. You also have the
+		right to lodge a complaint with a supervisory authority, in particular in the EU member state of
+		your residence, or with [competent supervisory authority of the controller].
+	</p>
+	<p>
+		For visitors from Switzerland: the corresponding rights under the Swiss Federal Act on Data
+		Protection (FADP) apply equivalently.
+	</p>
+
+	<h2>7. Changes</h2>
+	<p>
+		We may update this policy when the service changes; the date above reflects the latest revision.
+	</p>
+</ProsePage>

src/routes/legal/privacy/content/es.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Política de privacidad" subtitle="Última actualización: 1 de agosto de 2026">
+	<p>
+		Drizz.li está hecho para necesitar los mínimos datos posibles: sin cuentas, sin cookies, sin
+		publicidad y sin scripts de analítica ni de seguimiento. Esta página explica el poco tratamiento
+		que sí ocurre: al navegar por el sitio y al apoyar el proyecto con una aportación.
+	</p>
+
+	<h2>1. Responsable</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
+		Correo electrónico:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</address>
+	<p>
+		Esta política cubre los sitios drizz.li (la app meteorológica) y support.drizz.li (la página de
+		registro de colaboradores).
+	</p>
+
+	<h2>2. Navegación por el sitio</h2>
+	<h3>Peticiones de datos meteorológicos</h3>
+	<p>
+		Drizz.li es un sitio estático: cuando abres un pronóstico, tu navegador obtiene los datos
+		directamente de las API abiertas de
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>. Como en
+		cualquier petición web, esto transmite tu dirección IP y la ubicación o término buscado a
+		Open-Meteo. Nosotros no recibimos ni almacenamos nada de eso. Consulta
+		<a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener"
+			>las condiciones e información de privacidad de Open-Meteo</a
+		>. Base jurídica: nuestro interés legítimo en entregar el contenido que solicitas (art. 6.1.f
+		del RGPD).
+	</p>
+	<h3>Alojamiento</h3>
+	<p>
+		El sitio estático lo sirve [proveedor de alojamiento, ubicación]. La infraestructura puede
+		conservar registros técnicos de corta duración (dirección IP, URL solicitada, marca de tiempo)
+		por seguridad y operación. Base jurídica: interés legítimo en un servicio seguro y fiable (art.
+		6.1.f del RGPD).
+	</p>
+	<h3>Ajustes en tu dispositivo (almacenamiento local)</h3>
+	<p>
+		Tus preferencias - tema, unidades, última ubicación buscada y (para colaboradores) tu clave de
+		acceso y su última verificación - se guardan únicamente en el almacenamiento local de tu
+		navegador. No salen de tu dispositivo salvo como se describe abajo para verificar la clave, y
+		puedes borrarlas cuando quieras.
+	</p>
+
+	<h2>3. Apoyar el proyecto (aportaciones)</h2>
+	<p>
+		Las aportaciones desbloquean los extras, así que legalmente son un acuerdo remunerado y no una
+		donación pura; esto es lo que tratamos para gestionarlas:
+	</p>
+	<h3>Formulario de registro</h3>
+	<ul>
+		<li>
+			<strong>Dirección de correo</strong> (obligatoria) - para enviarte los datos de la transferencia
+			y, cuando llegue tu aportación, tu clave de acceso.
+		</li>
+		<li><strong>Nombre</strong> (opcional) - para ayudar a casar tu transferencia.</li>
+		<li>
+			<strong>Moneda e importe</strong> - determinados por la configuración regional/zona horaria de tu
+			navegador, en tu dispositivo (no se solicita geolocalización).
+		</li>
+		<li>
+			<strong>Dirección IP y señales técnicas anti-bots</strong> - guardadas con la solicitud para evitar
+			abusos y spam.
+		</li>
+		<li>
+			<strong>Referencia de pago</strong> (p. ej. DRZ-XXXXXX) - generada por solicitud para casar tu transferencia
+			con tu registro.
+		</li>
+	</ul>
+	<p>
+		Los datos de la transferencia (cuenta y referencia) se te envían por correo en lugar de
+		mostrarse en la página. Bases jurídicas: ejecución del contrato (art. 6.1.b del RGPD) y, para
+		las medidas antiabuso, interés legítimo (art. 6.1.f del RGPD).
+	</p>
+	<h3>Transferencia bancaria</h3>
+	<p>
+		Las aportaciones se pagan por transferencia bancaria ordinaria. Tu banco y el nuestro tratan los
+		datos bajo su propia responsabilidad; en nuestro extracto vemos los datos habituales (nombre,
+		número de cuenta, importe, referencia). Solo los usamos para casar tu aportación y debemos
+		conservar los registros contables por obligación legal (art. 6.1.c del RGPD).
+	</p>
+	<h3>Clave de acceso y verificación</h3>
+	<p>
+		Una vez casada tu transferencia (manualmente, normalmente en 24 horas), recibes una clave de
+		acceso por correo. Al pegarla en Drizz.li, tu navegador envía la clave a nuestro punto de
+		verificación (support.drizz.li) para comprobar si está activa; la respuesta contiene solo
+		validez, nivel y caducidad. La lista de suscriptores (clave, correo, caducidad) se guarda en
+		nuestro servidor mientras tu acceso esté activo.
+	</p>
+	<h3>Correo electrónico</h3>
+	<p>
+		Los correos transaccionales (datos de transferencia, clave de acceso, renovaciones) se envían a
+		través de nuestro proveedor Strato (Strato AG, Alemania), que actúa como encargado del
+		tratamiento. No enviamos boletines ni correo comercial.
+	</p>
+
+	<h2>4. Conservación</h2>
+	<ul>
+		<li>Las solicitudes de registro que nunca se pagan se eliminan como máximo a los 6 meses.</li>
+		<li>
+			Los registros de colaborador (clave, correo, caducidad) se conservan mientras tu acceso esté
+			activo y se eliminan en los 12 meses siguientes a su expiración, salvo que pidas borrarlos
+			antes.
+		</li>
+		<li>
+			Los registros contables (extractos que muestran tu transferencia) se conservan durante el
+			plazo legal (hasta 10 años según la jurisdicción).
+		</li>
+	</ul>
+
+	<h2>5. Destinatarios</h2>
+	<p>
+		No vendemos ni compartimos datos personales con terceros para sus propios fines. Los
+		destinatarios se limitan a: Open-Meteo (peticiones meteorológicas hechas directamente por tu
+		navegador), nuestro proveedor de alojamiento, nuestro proveedor de correo (Strato) y los bancos
+		implicados en tu transferencia.
+	</p>
+
+	<h2>6. Tus derechos</h2>
+	<p>
+		Conforme al RGPD tienes derecho de acceso, rectificación, supresión, limitación del tratamiento,
+		portabilidad y oposición al tratamiento basado en el interés legítimo. Cuando el tratamiento se
+		base en el consentimiento, puedes retirarlo en cualquier momento. Para ejercer estos derechos,
+		escribe a
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>. También tienes
+		derecho a presentar una reclamación ante una autoridad de control, en particular en el Estado
+		miembro de tu residencia, o ante [autoridad de control competente].
+	</p>
+	<p>
+		Para visitantes desde Suiza, se aplican de forma equivalente los derechos correspondientes de la
+		Ley Federal de Protección de Datos (LPD).
+	</p>
+
+	<h2>7. Cambios</h2>
+	<p>
+		Podemos actualizar esta política cuando cambie el servicio; la fecha de arriba refleja la última
+		revisión.
+	</p>
+	<p class="text-muted-foreground">
+		En caso de discrepancia prevalece la versión inglesa de esta política.
+	</p>
+</ProsePage>

src/routes/legal/privacy/content/fr.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Politique de confidentialité" subtitle="Dernière mise à jour : 1er août 2026">
+	<p>
+		Drizz.li est conçu pour avoir besoin du minimum de vos données : aucun compte, aucun cookie,
+		aucune publicité, aucun script d'analyse ou de suivi. Cette page explique le peu de traitement
+		qui a lieu - lorsque vous consultez le site et lorsque vous soutenez le projet par une
+		contribution.
+	</p>
+
+	<h2>1. Responsable du traitement</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
+		E-mail:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</address>
+	<p>
+		Cette politique couvre les sites drizz.li (l'application météo) et support.drizz.li (la page
+		d'inscription contributeur).
+	</p>
+
+	<h2>2. Navigation sur le site</h2>
+	<h3>Requêtes de données météo</h3>
+	<p>
+		Drizz.li est un site statique : lorsque vous ouvrez une prévision, votre navigateur récupère les
+		données directement auprès des API ouvertes d'
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>. Comme pour toute
+		requête web, cela transmet votre adresse IP et le lieu ou le terme recherché à Open-Meteo. Nous
+		n'en recevons ni n'en conservons rien. Voir
+		<a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener"
+			>les conditions et informations de confidentialité d'Open-Meteo</a
+		>. Base légale : notre intérêt légitime à fournir le contenu demandé (art. 6, par. 1, point f)
+		du RGPD).
+	</p>
+	<h3>Hébergement</h3>
+	<p>
+		Le site statique est servi par [hébergeur, localisation]. L'infrastructure d'hébergement peut
+		conserver de brefs journaux techniques (adresse IP, URL demandée, horodatage) à des fins de
+		sécurité et d'exploitation. Base légale : intérêt légitime à un service sûr et fiable (art. 6,
+		par. 1, point f) du RGPD).
+	</p>
+	<h3>Réglages sur votre appareil (stockage local)</h3>
+	<p>
+		Vos préférences - thème, unités, dernier lieu recherché et (pour les contributeurs) votre clé
+		d'accès et son dernier résultat de vérification - sont stockées uniquement dans le stockage
+		local de votre navigateur. Elles ne quittent pas votre appareil, sauf comme décrit ci-dessous
+		pour la vérification de la clé, et vous pouvez les effacer à tout moment.
+	</p>
+
+	<h2>3. Soutenir le projet (contributions)</h2>
+	<p>
+		Les contributions débloquent les bonus : juridiquement il s'agit donc d'un accord payant et non
+		d'un simple don - voici ce que nous traitons pour les gérer :
+	</p>
+	<h3>Formulaire d'inscription</h3>
+	<ul>
+		<li>
+			<strong>Adresse e-mail</strong> (obligatoire) - pour vous envoyer les coordonnées bancaires puis,
+			à réception de votre contribution, votre clé d'accès.
+		</li>
+		<li><strong>Nom</strong> (facultatif) - pour faciliter le rapprochement de votre virement.</li>
+		<li>
+			<strong>Devise et montant</strong> - déterminés d'après la langue/le fuseau horaire de votre navigateur,
+			sur votre appareil (aucune demande de géolocalisation).
+		</li>
+		<li>
+			<strong>Adresse IP et signaux anti-robots techniques</strong> - conservés avec la demande pour prévenir
+			les abus et le spam.
+		</li>
+		<li>
+			<strong>Référence de paiement</strong> (p. ex. DRZ-XXXXXX) - générée par demande pour rapprocher
+			votre virement de votre inscription.
+		</li>
+	</ul>
+	<p>
+		Les coordonnées bancaires (compte et référence) vous sont envoyées par e-mail plutôt
+		qu'affichées sur la page. Bases légales : exécution du contrat (art. 6, par. 1, point b) du
+		RGPD) et, pour les mesures anti-abus, intérêt légitime (art. 6, par. 1, point f) du RGPD).
+	</p>
+	<h3>Virement bancaire</h3>
+	<p>
+		Les contributions sont réglées par virement bancaire ordinaire. Votre banque et la nôtre
+		traitent les données du virement sous leur propre responsabilité ; sur notre relevé figurent les
+		informations habituelles (nom, numéro de compte, montant, référence). Nous ne les utilisons que
+		pour rapprocher votre contribution et devons conserver les pièces comptables au titre des
+		obligations légales (art. 6, par. 1, point c) du RGPD).
+	</p>
+	<h3>Clé d'accès et vérification</h3>
+	<p>
+		Une fois votre virement rapproché (manuellement, en général sous 24 heures), vous recevez une
+		clé d'accès par e-mail. Lorsque vous la collez dans Drizz.li, votre navigateur envoie la clé à
+		notre point de vérification (support.drizz.li) pour savoir si elle est active ; la réponse ne
+		contient que la validité, le niveau et l'échéance. La liste des abonnés (clé, e-mail, échéance)
+		est conservée sur notre serveur tant que votre accès est actif.
+	</p>
+	<h3>E-mail</h3>
+	<p>
+		Les e-mails transactionnels (coordonnées bancaires, clé d'accès, renouvellements) sont envoyés
+		via notre prestataire Strato (Strato AG, Allemagne), agissant comme sous-traitant. Nous
+		n'envoyons ni newsletter ni e-mail marketing.
+	</p>
+
+	<h2>4. Conservation</h2>
+	<ul>
+		<li>Les demandes d'inscription jamais payées sont supprimées au plus tard après 6 mois.</li>
+		<li>
+			Les données contributeur (clé, e-mail, échéance) sont conservées tant que votre accès est
+			actif et supprimées dans les 12 mois suivant son expiration, sauf demande de suppression
+			anticipée.
+		</li>
+		<li>
+			Les pièces comptables (relevés bancaires mentionnant votre virement) sont conservées pendant
+			la durée légale (jusqu'à 10 ans selon la juridiction).
+		</li>
+	</ul>
+
+	<h2>5. Destinataires</h2>
+	<p>
+		Nous ne vendons ni ne partageons de données personnelles avec des tiers pour leurs propres
+		finalités. Les destinataires se limitent à : Open-Meteo (requêtes météo effectuées directement
+		par votre navigateur), notre hébergeur, notre prestataire e-mail (Strato) et les banques
+		impliquées dans votre virement.
+	</p>
+
+	<h2>6. Vos droits</h2>
+	<p>
+		En vertu du RGPD, vous disposez d'un droit d'accès, de rectification, d'effacement, de
+		limitation du traitement, de portabilité, et d'opposition au traitement fondé sur l'intérêt
+		légitime. Lorsque le traitement repose sur le consentement, vous pouvez le retirer à tout
+		moment. Pour exercer ces droits, écrivez à
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>. Vous avez
+		également le droit d'introduire une réclamation auprès d'une autorité de contrôle, notamment
+		dans l'État membre de votre résidence, ou auprès de [autorité de contrôle compétente].
+	</p>
+	<p>
+		Pour les visiteurs suisses, les droits correspondants de la loi fédérale sur la protection des
+		données (LPD) s'appliquent de manière équivalente.
+	</p>
+
+	<h2>7. Modifications</h2>
+	<p>
+		Nous pouvons mettre à jour cette politique lorsque le service évolue ; la date ci-dessus indique
+		la dernière révision.
+	</p>
+	<p class="text-muted-foreground">
+		En cas de divergence, la version anglaise de cette politique fait foi.
+	</p>
+</ProsePage>

src/routes/legal/privacy/content/it.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+</script>
+
+<ProsePage title="Informativa sulla privacy" subtitle="Ultimo aggiornamento: 1 agosto 2026">
+	<p>
+		Drizz.li è costruito per aver bisogno del minimo dei tuoi dati: nessun account, nessun cookie,
+		nessuna pubblicità, nessuno script di analisi o tracciamento. Questa pagina spiega il poco
+		trattamento che avviene comunque: quando navighi sul sito e quando sostieni il progetto con un
+		contributo.
+	</p>
+
+	<h2>1. Titolare del trattamento</h2>
+	<address>
+		Vincent van der Wal<br />
+		Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
+		E-mail:
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+	</address>
+	<p>
+		Questa informativa copre i siti drizz.li (l'app meteo) e support.drizz.li (la pagina di
+		iscrizione per i sostenitori).
+	</p>
+
+	<h2>2. Navigazione sul sito</h2>
+	<h3>Richieste di dati meteo</h3>
+	<p>
+		Drizz.li è un sito statico: quando apri una previsione, il tuo browser scarica i dati
+		direttamente dalle API aperte di
+		<a href="https://open-meteo.com" target="_blank" rel="noopener">Open-Meteo</a>. Come per
+		qualsiasi richiesta web, questo trasmette il tuo indirizzo IP e la località o il termine cercato
+		a Open-Meteo. Noi non riceviamo né conserviamo nulla di tutto ciò. Vedi
+		<a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener"
+			>le condizioni e le informazioni sulla privacy di Open-Meteo</a
+		>. Base giuridica: il nostro legittimo interesse a fornire il contenuto richiesto (art. 6, par.
+		1, lett. f del GDPR).
+	</p>
+	<h3>Hosting</h3>
+	<p>
+		Il sito statico è servito da [fornitore di hosting, sede]. L'infrastruttura può conservare brevi
+		log tecnici del server (indirizzo IP, URL richiesto, data e ora) per sicurezza e gestione. Base
+		giuridica: legittimo interesse a un servizio sicuro e affidabile (art. 6, par. 1, lett. f del
+		GDPR).
+	</p>
+	<h3>Impostazioni sul tuo dispositivo (archiviazione locale)</h3>
+	<p>
+		Le tue preferenze - tema, unità di misura, ultima località cercata e (per i sostenitori) la
+		chiave di accesso e l'ultimo esito della verifica - sono salvate solo nell'archiviazione locale
+		del browser. Non lasciano il tuo dispositivo, salvo quanto descritto sotto per la verifica della
+		chiave, e puoi cancellarle quando vuoi.
+	</p>
+
+	<h2>3. Sostenere il progetto (contributi)</h2>
+	<p>
+		I contributi sbloccano gli extra, quindi giuridicamente sono un accordo a pagamento e non una
+		pura donazione: ecco cosa trattiamo per gestirli:
+	</p>
+	<h3>Modulo di iscrizione</h3>
+	<ul>
+		<li>
+			<strong>Indirizzo e-mail</strong> (obbligatorio) - per inviarti i dati del bonifico e, all'arrivo
+			del contributo, la chiave di accesso.
+		</li>
+		<li><strong>Nome</strong> (facoltativo) - per facilitare l'abbinamento del bonifico.</li>
+		<li>
+			<strong>Valuta e importo</strong> - determinati dalle impostazioni locali/fuso orario del browser,
+			sul tuo dispositivo (nessuna richiesta di geolocalizzazione).
+		</li>
+		<li>
+			<strong>Indirizzo IP e segnali tecnici anti-bot</strong> - conservati con la richiesta per prevenire
+			abusi e spam.
+		</li>
+		<li>
+			<strong>Riferimento di pagamento</strong> (es. DRZ-XXXXXX) - generato per ogni richiesta per abbinare
+			il bonifico all'iscrizione.
+		</li>
+	</ul>
+	<p>
+		I dati del bonifico (conto e riferimento) ti vengono inviati via e-mail anziché mostrati sulla
+		pagina. Basi giuridiche: esecuzione del contratto (art. 6, par. 1, lett. b del GDPR) e, per le
+		misure anti-abuso, legittimo interesse (art. 6, par. 1, lett. f del GDPR).
+	</p>
+	<h3>Bonifico bancario</h3>
+	<p>
+		I contributi si pagano con un normale bonifico. La tua banca e la nostra trattano i dati del
+		bonifico sotto la propria responsabilità; sul nostro estratto conto vediamo i dati consueti
+		(nome, numero di conto, importo, riferimento). Li usiamo solo per abbinare il contributo e siamo
+		tenuti a conservare le scritture contabili per obbligo di legge (art. 6, par. 1, lett. c del
+		GDPR).
+	</p>
+	<h3>Chiave di accesso e verifica</h3>
+	<p>
+		Dopo l'abbinamento del bonifico (manuale, di solito entro 24 ore) ricevi una chiave di accesso
+		via e-mail. Quando la incolli in Drizz.li, il browser invia la chiave al nostro endpoint di
+		verifica (support.drizz.li) per controllare se è attiva; la risposta contiene solo validità,
+		livello e scadenza. L'elenco dei sostenitori (chiave, e-mail, scadenza) resta sul nostro server
+		finché il tuo accesso è attivo.
+	</p>
+	<h3>E-mail</h3>
+	<p>
+		Le e-mail transazionali (dati del bonifico, chiave di accesso, rinnovi) sono inviate tramite il
+		nostro fornitore Strato (Strato AG, Germania), che agisce come responsabile del trattamento. Non
+		inviamo newsletter né e-mail di marketing.
+	</p>
+
+	<h2>4. Conservazione</h2>
+	<ul>
+		<li>Le richieste di iscrizione mai pagate sono cancellate al più tardi dopo 6 mesi.</li>
+		<li>
+			I dati dei sostenitori (chiave, e-mail, scadenza) sono conservati finché l'accesso è attivo e
+			cancellati entro 12 mesi dalla scadenza, salvo richiesta di cancellazione anticipata.
+		</li>
+		<li>
+			Le scritture contabili (estratti conto con il tuo bonifico) sono conservate per il periodo di
+			legge (fino a 10 anni a seconda della giurisdizione).
+		</li>
+	</ul>
+
+	<h2>5. Destinatari</h2>
+	<p>
+		Non vendiamo né condividiamo dati personali con terzi per finalità proprie. I destinatari si
+		limitano a: Open-Meteo (richieste meteo fatte direttamente dal tuo browser), il nostro fornitore
+		di hosting, il nostro fornitore e-mail (Strato) e le banche coinvolte nel bonifico.
+	</p>
+
+	<h2>6. I tuoi diritti</h2>
+	<p>
+		In base al GDPR hai diritto di accesso, rettifica, cancellazione, limitazione del trattamento,
+		portabilità dei dati e opposizione al trattamento fondato sul legittimo interesse. Se il
+		trattamento si basa sul consenso, puoi revocarlo in qualsiasi momento. Per esercitare questi
+		diritti scrivi a
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>. Hai inoltre il
+		diritto di proporre reclamo a un'autorità di controllo, in particolare nello Stato membro di
+		residenza, o a [autorità di controllo competente].
+	</p>
+	<p>
+		Per i visitatori dalla Svizzera valgono in modo equivalente i corrispondenti diritti previsti
+		dalla Legge federale sulla protezione dei dati (LPD).
+	</p>
+
+	<h2>7. Modifiche</h2>
+	<p>
+		Possiamo aggiornare questa informativa quando il servizio cambia; la data in alto indica
+		l'ultima revisione.
+	</p>
+	<p class="text-muted-foreground">
+		In caso di discrepanza prevale la versione inglese di questa informativa.
+	</p>
+</ProsePage>

src/routes/legal/terms/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import LocalizedContent from '$lib/components/localized-content.svelte';
+
+	import de from './content/de.svelte';
+	import en from './content/en.svelte';
+	import es from './content/es.svelte';
+	import fr from './content/fr.svelte';
+	import it from './content/it.svelte';
+</script>
+
+<LocalizedContent variants={{ en, de, es, fr, it }} />

src/routes/legal/terms/content/de.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Unterstützerbedingungen" subtitle="Zuletzt aktualisiert: 1. August 2026">
+	<p>
+		Drizz.li ist kostenlos nutzbar. Diese Bedingungen betreffen den freiwilligen
+		Unterstützerbeitrag: eine kleine Zahlung, die das Projekt am Laufen hält und als Dankeschön die
+		Unterstützer-Extras freischaltet. Auch wenn wir von einem Beitrag sprechen, werden dafür
+		Funktionen freigeschaltet.
+	</p>
+
+	<h2>1. Was Sie erhalten</h2>
+	<p>
+		Ein Unterstützerbeitrag schaltet die Extras für den bezahlten Zeitraum frei: derzeit
+		historisches Wetter mit Vergleich zu den Klimanormalen sowie neue Funktionen, sobald sie
+		erscheinen. Die kostenlosen Teile von Drizz.li bleiben für alle frei.
+	</p>
+
+	<h2>2. Ablauf</h2>
+	<ul>
+		<li>
+			Sie fordern die Überweisungsdaten auf der Anmeldeseite an; wir senden sie Ihnen zusammen mit
+			einer persönlichen Zahlungsreferenz per E-Mail.
+		</li>
+		<li>
+			Sie überweisen den Betrag (ab 3 € / 3 $ / 3 CHF pro Monat) per gewöhnlicher Banküberweisung
+			unter Angabe der Referenz.
+		</li>
+		<li>
+			Überweisungen werden manuell zugeordnet. Sobald Ihr Beitrag eingeht - meist innerhalb von 24
+			Stunden, höchstens einige Tage - erhalten Sie per E-Mail einen persönlichen Zugangsschlüssel.
+		</li>
+		<li>
+			Sie fügen den Schlüssel einmal in Drizz.li ein; er wird auf Ihrem Gerät gespeichert und
+			automatisch überprüft.
+		</li>
+	</ul>
+
+	<h2>3. Keine automatische Verlängerung</h2>
+	<p>
+		Beiträge sind einmalig und im Voraus bezahlt: Nichts verlängert sich automatisch und wir
+		belasten Sie nie. Läuft Ihr Zeitraum ab, sperren sich die Extras einfach wieder; ein erneuter
+		Beitrag mit derselben E-Mail verlängert Ihren bestehenden Schlüssel.
+	</p>
+
+	<h2>4. Widerruf und Erstattung</h2>
+	<p>
+		Als Verbraucherin oder Verbraucher in der EU/im EWR haben Sie ein gesetzliches 14-tägiges
+		Widerrufsrecht. Darüber hinaus halten wir es einfach: Sind Sie innerhalb von 14 Tagen nach
+		Erhalt Ihres Zugangsschlüssels aus irgendeinem Grund unzufrieden, schreiben Sie an
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+		und wir erstatten Ihren Beitrag vollständig.
+	</p>
+
+	<h2>5. Faire Nutzung</h2>
+	<p>
+		Der Zugangsschlüssel ist persönlich. Bitte veröffentlichen oder teilen Sie ihn nicht; eindeutig
+		missbrauchte Schlüssel (z. B. öffentlich geteilt) können gesperrt werden. Wird Ihr Schlüssel
+		ohne Grund gesperrt, haben Sie Anspruch auf eine anteilige Erstattung.
+	</p>
+
+	<h2>6. Dienst und Verfügbarkeit</h2>
+	<p>
+		Drizz.li ist ein persönliches Open-Source-Projekt und wird ohne Gewähr bereitgestellt. Wir
+		bemühen uns um Verfügbarkeit und Genauigkeit, können aber weder unterbrechungsfreien Betrieb
+		noch die Richtigkeit der Vorhersagen garantieren - Wetterdaten sind rein informativ (siehe
+		Haftungsausschluss im Impressum). Sollten die Unterstützer-Extras während eines bezahlten
+		Zeitraums dauerhaft ausfallen, erstatten wir auf Anfrage den Restzeitraum.
+	</p>
+
+	<h2>7. Daten</h2>
+	<p>
+		Wie wir Ihre Daten (E-Mail, Zahlungsreferenz, Überweisungsdaten) verarbeiten, steht in der
+		<a href={href('/legal/privacy')}>Datenschutzerklärung</a>.
+	</p>
+
+	<h2>8. Anwendbares Recht</h2>
+	<p>
+		Für diese Bedingungen gilt das Recht der [Schweiz], unbeschadet zwingender
+		Verbraucherschutzvorschriften Ihres Wohnsitzlandes.
+	</p>
+
+	<p class="text-muted-foreground">Massgeblich ist die englische Fassung dieser Bedingungen.</p>
+</ProsePage>

src/routes/legal/terms/content/en.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Supporter terms" subtitle="Last updated: 1 August 2026">
+	<p>
+		Drizz.li is free to use. These terms cover the optional supporter contribution: a small payment
+		that helps keep the project running and, as a thank-you, unlocks the supporter extras. Although
+		we call it a contribution, features are unlocked in return.
+	</p>
+
+	<h2>1. What you get</h2>
+	<p>
+		A supporter contribution unlocks the supporter extras for the paid period: currently historical
+		weather with climate-normal comparisons, plus new supporter features as they land. The free
+		parts of Drizz.li stay free for everyone.
+	</p>
+
+	<h2>2. How it works</h2>
+	<ul>
+		<li>
+			You request the transfer details on the signup page; we email them to you together with a
+			personal payment reference.
+		</li>
+		<li>
+			You transfer the amount (from €3 / $3 / CHF 3 per month) by ordinary bank transfer, including
+			the reference.
+		</li>
+		<li>
+			Transfers are matched manually. Once your contribution arrives - usually within 24 hours, at
+			most a few days - you receive a personal access key by email.
+		</li>
+		<li>
+			You paste the key into Drizz.li once; it is stored on your device and verified automatically.
+		</li>
+	</ul>
+
+	<h2>3. No auto-renewal</h2>
+	<p>
+		Contributions are one-off and prepaid: nothing renews automatically and we never charge you.
+		When your period ends, the extras simply lock again; contributing again with the same email
+		extends your existing key.
+	</p>
+
+	<h2>4. Withdrawal and refunds</h2>
+	<p>
+		If you are a consumer in the EU/EEA, you have a statutory 14-day right of withdrawal. Beyond
+		that, we keep it simple: if you are unhappy for any reason within 14 days of receiving your
+		access key, email
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a> and we will refund your
+		contribution in full.
+	</p>
+
+	<h2>5. Fair use</h2>
+	<p>
+		The access key is personal. Please don't publish or share it; keys that are clearly abused (e.g.
+		shared publicly) may be revoked. If your key is revoked without cause, you are entitled to a
+		pro-rata refund.
+	</p>
+
+	<h2>6. Service and availability</h2>
+	<p>
+		Drizz.li is a personal open-source project, provided as-is. We work to keep it available and
+		accurate, but we cannot guarantee uninterrupted availability or the correctness of forecasts -
+		weather data is informational only (see the disclaimer in the imprint). If the supporter extras
+		become permanently unavailable during a period you paid for, we will refund the remaining period
+		on request.
+	</p>
+
+	<h2>7. Data</h2>
+	<p>
+		How we handle your data (email, payment reference, bank transfer details) is described in the
+		<a href={href('/legal/privacy')}>privacy policy</a>.
+	</p>
+
+	<h2>8. Governing law</h2>
+	<p>
+		These terms are governed by the law of [Switzerland], without prejudice to mandatory consumer
+		protection provisions of your country of residence.
+	</p>
+</ProsePage>

src/routes/legal/terms/content/es.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage
+	title="Condiciones para colaboradores"
+	subtitle="Última actualización: 1 de agosto de 2026"
+>
+	<p>
+		Drizz.li es gratuito. Estas condiciones cubren la aportación voluntaria de colaborador: un
+		pequeño pago que ayuda a mantener el proyecto y que, como agradecimiento, desbloquea los extras.
+		Aunque lo llamamos aportación, a cambio se desbloquean funciones.
+	</p>
+
+	<h2>1. Qué obtienes</h2>
+	<p>
+		Una aportación desbloquea los extras durante el periodo pagado: actualmente el clima histórico
+		con comparación frente a las normales climáticas, además de las nuevas funciones que vayan
+		llegando. Las partes gratuitas de Drizz.li siguen siendo gratuitas para todos.
+	</p>
+
+	<h2>2. Cómo funciona</h2>
+	<ul>
+		<li>
+			Solicitas los datos de la transferencia en la página de registro; te los enviamos por correo
+			junto con una referencia de pago personal.
+		</li>
+		<li>
+			Transfieres el importe (desde 3 € / 3 $ / 3 CHF al mes) mediante una transferencia bancaria
+			ordinaria, incluyendo la referencia.
+		</li>
+		<li>
+			Las transferencias se concilian manualmente. Cuando llega tu aportación - normalmente en 24
+			horas, como mucho unos días - recibes por correo una clave de acceso personal.
+		</li>
+		<li>
+			Pegas la clave en Drizz.li una vez; se guarda en tu dispositivo y se verifica automáticamente.
+		</li>
+	</ul>
+
+	<h2>3. Sin renovación automática</h2>
+	<p>
+		Las aportaciones son únicas y prepagadas: nada se renueva solo y nunca te cobramos. Cuando
+		termina tu periodo, los extras simplemente se bloquean de nuevo; volver a aportar con el mismo
+		correo amplía tu clave existente.
+	</p>
+
+	<h2>4. Desistimiento y reembolsos</h2>
+	<p>
+		Si eres consumidor en la UE/EEE, dispones de un derecho legal de desistimiento de 14 días. Más
+		allá de eso, lo mantenemos sencillo: si no estás satisfecho por cualquier motivo en los 14 días
+		siguientes a recibir tu clave, escribe a
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+		y te reembolsaremos la aportación íntegra.
+	</p>
+
+	<h2>5. Uso razonable</h2>
+	<p>
+		La clave de acceso es personal. No la publiques ni la compartas; las claves claramente abusadas
+		(por ejemplo, compartidas públicamente) pueden revocarse. Si tu clave se revoca sin causa,
+		tienes derecho a un reembolso proporcional.
+	</p>
+
+	<h2>6. Servicio y disponibilidad</h2>
+	<p>
+		Drizz.li es un proyecto personal de código abierto, ofrecido tal cual. Trabajamos para
+		mantenerlo disponible y preciso, pero no podemos garantizar disponibilidad ininterrumpida ni la
+		exactitud de los pronósticos: los datos meteorológicos son solo informativos (véase el descargo
+		del aviso legal). Si los extras dejan de estar disponibles de forma permanente durante un
+		periodo que has pagado, reembolsaremos el periodo restante a petición.
+	</p>
+
+	<h2>7. Datos</h2>
+	<p>
+		Cómo tratamos tus datos (correo, referencia de pago, datos de la transferencia) se describe en
+		la
+		<a href={href('/legal/privacy')}>política de privacidad</a>.
+	</p>
+
+	<h2>8. Legislación aplicable</h2>
+	<p>
+		Estas condiciones se rigen por la legislación de [Suiza], sin perjuicio de las disposiciones
+		imperativas de protección al consumidor de tu país de residencia.
+	</p>
+
+	<p class="text-muted-foreground">
+		En caso de discrepancia prevalece la versión inglesa de estas condiciones.
+	</p>
+</ProsePage>

src/routes/legal/terms/content/fr.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Conditions contributeur" subtitle="Dernière mise à jour : 1er août 2026">
+	<p>
+		Drizz.li est gratuit. Ces conditions portent sur la contribution facultative : un petit paiement
+		qui aide à faire vivre le projet et qui, en remerciement, débloque les bonus. Même si nous
+		parlons de contribution, des fonctionnalités sont débloquées en retour.
+	</p>
+
+	<h2>1. Ce que vous obtenez</h2>
+	<p>
+		Une contribution débloque les bonus pour la période payée : actuellement la météo historique
+		avec comparaison aux normales climatiques, ainsi que les nouvelles fonctions à venir. Les
+		parties gratuites de Drizz.li le restent pour tout le monde.
+	</p>
+
+	<h2>2. Fonctionnement</h2>
+	<ul>
+		<li>
+			Vous demandez les coordonnées bancaires sur la page d'inscription ; nous vous les envoyons par
+			e-mail avec une référence de paiement personnelle.
+		</li>
+		<li>
+			Vous virez le montant (à partir de 3 € / 3 $ / 3 CHF par mois) par virement bancaire
+			ordinaire, en indiquant la référence.
+		</li>
+		<li>
+			Les virements sont rapprochés manuellement. Dès réception de votre contribution - en général
+			sous 24 heures, au plus quelques jours - vous recevez une clé d'accès personnelle par e-mail.
+		</li>
+		<li>
+			Vous collez la clé dans Drizz.li une seule fois ; elle est stockée sur votre appareil et
+			vérifiée automatiquement.
+		</li>
+	</ul>
+
+	<h2>3. Pas de reconduction automatique</h2>
+	<p>
+		Les contributions sont ponctuelles et prépayées : rien ne se reconduit et nous ne vous prélevons
+		jamais. À la fin de votre période, les bonus se reverrouillent simplement ; contribuer à nouveau
+		avec la même adresse prolonge votre clé existante.
+	</p>
+
+	<h2>4. Rétractation et remboursement</h2>
+	<p>
+		Si vous êtes consommateur dans l'UE/EEE, vous disposez d'un droit légal de rétractation de 14
+		jours. Au-delà, nous faisons simple : si vous n'êtes pas satisfait, pour quelque raison que ce
+		soit, dans les 14 jours suivant la réception de votre clé, écrivez à
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+		et nous vous remboursons intégralement.
+	</p>
+
+	<h2>5. Usage loyal</h2>
+	<p>
+		La clé d'accès est personnelle. Merci de ne pas la publier ni la partager ; les clés
+		manifestement détournées (par exemple partagées publiquement) peuvent être révoquées. Si votre
+		clé est révoquée sans motif, vous avez droit à un remboursement au prorata.
+	</p>
+
+	<h2>6. Service et disponibilité</h2>
+	<p>
+		Drizz.li est un projet personnel open source, fourni en l'état. Nous nous efforçons de le
+		maintenir disponible et exact, mais nous ne pouvons garantir ni une disponibilité ininterrompue
+		ni l'exactitude des prévisions - les données météo sont purement informatives (voir
+		l'avertissement dans les mentions légales). Si les bonus devenaient définitivement indisponibles
+		pendant une période payée, nous rembourserions la période restante sur demande.
+	</p>
+
+	<h2>7. Données</h2>
+	<p>
+		La façon dont nous traitons vos données (e-mail, référence de paiement, informations de
+		virement) est décrite dans la
+		<a href={href('/legal/privacy')}>politique de confidentialité</a>.
+	</p>
+
+	<h2>8. Droit applicable</h2>
+	<p>
+		Ces conditions sont régies par le droit de la [Suisse], sans préjudice des dispositions
+		impératives de protection des consommateurs de votre pays de résidence.
+	</p>
+
+	<p class="text-muted-foreground">
+		En cas de divergence, la version anglaise de ces conditions fait foi.
+	</p>
+</ProsePage>

src/routes/legal/terms/content/it.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import ProsePage from '$lib/components/prose-page.svelte';
+
+	import { href } from '$lib/i18n';
+</script>
+
+<ProsePage title="Condizioni per i sostenitori" subtitle="Ultimo aggiornamento: 1 agosto 2026">
+	<p>
+		Drizz.li è gratuito. Queste condizioni riguardano il contributo facoltativo di sostegno: un
+		piccolo pagamento che aiuta a mantenere vivo il progetto e che, come ringraziamento, sblocca gli
+		extra. Anche se lo chiamiamo contributo, in cambio vengono sbloccate delle funzioni.
+	</p>
+
+	<h2>1. Cosa ottieni</h2>
+	<p>
+		Un contributo sblocca gli extra per il periodo pagato: attualmente il meteo storico con
+		confronto rispetto alle normali climatiche, oltre alle nuove funzioni man mano che arrivano. Le
+		parti gratuite di Drizz.li restano gratuite per tutti.
+	</p>
+
+	<h2>2. Come funziona</h2>
+	<ul>
+		<li>
+			Richiedi i dati per il bonifico nella pagina di iscrizione; te li inviamo via e-mail insieme a
+			un riferimento di pagamento personale.
+		</li>
+		<li>
+			Effettui il bonifico (da 3 € / 3 $ / 3 CHF al mese) con un normale bonifico bancario,
+			indicando il riferimento.
+		</li>
+		<li>
+			I bonifici vengono abbinati manualmente. Appena il contributo arriva - di solito entro 24 ore,
+			al massimo pochi giorni - ricevi via e-mail una chiave di accesso personale.
+		</li>
+		<li>
+			Incolli la chiave in Drizz.li una volta sola; viene salvata sul tuo dispositivo e verificata
+			automaticamente.
+		</li>
+	</ul>
+
+	<h2>3. Nessun rinnovo automatico</h2>
+	<p>
+		I contributi sono una tantum e prepagati: nulla si rinnova da solo e non ti addebitiamo mai
+		nulla. Alla fine del periodo gli extra si bloccano semplicemente di nuovo; un nuovo contributo
+		con la stessa e-mail estende la chiave esistente.
+	</p>
+
+	<h2>4. Recesso e rimborsi</h2>
+	<p>
+		Se sei un consumatore nell'UE/SEE, hai un diritto di recesso legale di 14 giorni. Oltre a
+		questo, la teniamo semplice: se per qualsiasi motivo non sei soddisfatto entro 14 giorni dalla
+		ricezione della chiave, scrivi a
+		<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
+		e ti rimborseremo l'intero contributo.
+	</p>
+
+	<h2>5. Uso corretto</h2>
+	<p>
+		La chiave di accesso è personale. Non pubblicarla né condividerla; le chiavi chiaramente abusate
+		(ad esempio condivise pubblicamente) possono essere revocate. Se la tua chiave viene revocata
+		senza motivo, hai diritto a un rimborso proporzionale.
+	</p>
+
+	<h2>6. Servizio e disponibilità</h2>
+	<p>
+		Drizz.li è un progetto personale open source, fornito così com'è. Lavoriamo per mantenerlo
+		disponibile e accurato, ma non possiamo garantire né la continuità del servizio né la
+		correttezza delle previsioni: i dati meteo sono solo informativi (vedi l'avvertenza nelle note
+		legali). Se gli extra dovessero diventare permanentemente non disponibili durante un periodo
+		pagato, rimborseremo su richiesta il periodo residuo.
+	</p>
+
+	<h2>7. Dati</h2>
+	<p>
+		Il trattamento dei tuoi dati (e-mail, riferimento di pagamento, dati del bonifico) è descritto
+		nell'
+		<a href={href('/legal/privacy')}>informativa sulla privacy</a>.
+	</p>
+
+	<h2>8. Legge applicabile</h2>
+	<p>
+		Queste condizioni sono regolate dal diritto della [Svizzera], fatte salve le disposizioni
+		imperative di tutela del consumatore del tuo paese di residenza.
+	</p>
+
+	<p class="text-muted-foreground">
+		In caso di discrepanza prevale la versione inglese di queste condizioni.
+	</p>
+</ProsePage>

src/routes/page.svelte.spec.ts

@@ -1,14 +1,13 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
 
 import Page from './+page.svelte';
 
 describe('/+page.svelte', () => {
-	it('should render h1', async () => {
+	it('should render the redirect page with correct title', async () => {
 		render(Page);
 
-		const heading = page.getByRole('heading', { level: 1 });
+		const title = document.querySelector('title');
-		await expect.element(heading).toBeInTheDocument();
+		expect(title?.textContent).toBe('Drizz.li');
 	});
 });

src/routes/weather/+layout.svelte

@@ -1,216 +1,72 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { setContext } from 'svelte';
-	import { get } from 'svelte/store';
-	import { fade, fly } from 'svelte/transition';
 
 	import { page } from '$app/stores';
 
 	import { storedLocation } from '$lib/stores/settings';
 
-	import LocationSearch from '$lib/components/location/location-search.svelte';
+	import { routePath } from '$lib/i18n';
-	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
+	import * as m from '$lib/paraglide/messages';
+
+	import type { Snippet } from 'svelte';
 
 	interface Props {
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 
 	let { children }: Props = $props();
 
-	interface CurrentWeather {
+	// The location heading lives in the layout, not in each page: a layout
-		current: {
+	// survives navigation, so switching between forecasts no longer tears the
-			temperature_2m: number;
+	// heading down and rebuilds it once the next page's data has loaded.
-			weather_code: number;
+	// Page-specific controls (model pickers, range buttons) render into the same
-		};
+	// row through this context.
-	}
+	let actions = $state<Snippet | null>(null);
-
+	setContext('weather-hero', {
-	let location = $state(get(storedLocation));
+		setActions: (snippet: Snippet | null) => {
-	let mounted = $state(false);
+			actions = snippet;
-	let currentWeather = $state<CurrentWeather | null>(null);
-
-	// Subscribe to location changes
-	storedLocation.subscribe((value) => {
-		location = value;
-		if (mounted) {
-			loadCurrentWeather();
 		}
 	});
 
-	onMount(() => {
+	// Page data wins; the persisted store covers the moment before the first
-		mounted = true;
+	// load resolves (and any weather page that doesn't carry a location).
-		loadCurrentWeather();
+	let location = $derived($page.data.location ?? $storedLocation);
-	});
 
-	const loadCurrentWeather = async () => {
+	const SUBTITLES: [string, () => string][] = [
-		if (!location?.latitude) return;
+		['/weather/week', m.page_week_subtitle],
-
+		['/weather/compare', m.page_compare_subtitle],
-		try {
+		['/weather/14-day', m.page_14day_subtitle],
-			const response = await fetch(
+		['/weather/seasonal', m.page_seasonal_subtitle],
-				`https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&current=temperature_2m,weather_code&forecast_days=1`
+		['/weather/historical', m.page_historical_subtitle]
+	];
+	let subtitle = $derived(
+		SUBTITLES.find(([prefix]) => routePath($page.url.pathname).startsWith(prefix))?.[1]?.() ?? null
 	);
-			const data = await response.json();
-			currentWeather = data;
-		} catch (error) {
-			console.error('Failed to load current weather:', error);
-		}
-	};
-
-	const getWeatherIcon = (code: number): string => {
-		const iconMap: Record<number, string> = {
-			0: '☀️',
-			1: '🌤️',
-			2: '⛅',
-			3: '☁️',
-			45: '🌫️',
-			48: '🌫️',
-			51: '🌦️',
-			53: '🌦️',
-			55: '🌦️',
-			61: '🌧️',
-			63: '🌧️',
-			65: '🌧️',
-			71: '🌨️',
-			73: '🌨️',
-			75: '❄️',
-			95: '⛈️'
-		};
-		return iconMap[code] || '☁️';
-	};
-
-	const getPageTitle = () => {
-		const path = $page.url.pathname;
-		if (path.includes('/compare')) return 'Model Comparison';
-		if (path.includes('/14-day')) return '14 Day Forecast';
-		if (path.includes('/week')) return 'Week Prediction';
-		return 'Weather Forecast';
-	};
 </script>
 
-<WeatherNav />
+{#if subtitle && location}
-
+	<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
-<div
+		<div class="flex min-w-0 items-center gap-3">
-	class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900"
->
-	<!-- Hero Header Section -->
-	<div class="relative overflow-hidden bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600">
-		<div class="absolute inset-0 bg-black/10"></div>
-		<div class="relative">
-			<div class="container mx-auto px-6 py-12">
-				{#if mounted}
-					<div class="flex flex-col items-center space-y-6" in:fade={{ duration: 800 }}>
-						<!-- Page Title -->
-						<div class="text-center" in:fly={{ y: -20, duration: 600, delay: 200 }}>
-							<h1 class="mb-2 text-3xl font-bold text-white md:text-4xl">
-								{getPageTitle()}
-							</h1>
-						</div>
-
-						<!-- Location Display & Search -->
-						<div class="w-full max-w-2xl" in:fly={{ y: 20, duration: 600, delay: 400 }}>
-							<div
-								class="rounded-2xl bg-white/95 p-6 shadow-2xl backdrop-blur-md dark:bg-gray-800/95"
-							>
-								<!-- Current Location Display -->
-								{#if location}
-									<div
-										class="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0 md:space-x-6"
-									>
-										<!-- Location Info -->
-										<div class="flex flex-1 items-center space-x-4">
-											<div class="flex-shrink-0">
 			<img
-													class="h-12 w-12 rounded-full shadow-lg"
+				class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
-													src="/images/country-flags/{(
+				src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
-														location.country_code || 'united_nations'
+				alt={location.country ?? ''}
-													).toLowerCase()}.svg"
-													alt={location.country}
 			/>
-											</div>
+			<div class="min-w-0">
-											<div class="flex-1 text-left">
+				<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
-												<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
 					{location.name}
-												</h2>
+				</h1>
-												<p class="text-gray-600 dark:text-gray-300">
+				<p class="truncate text-sm text-muted-foreground">
-													{#if location.admin1}{location.admin1},
+					<span class="lg:hidden"
-													{/if}{location.country}
+						>{#if location.admin1}{location.admin1},
-												</p>
+						{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
-												<p class="text-sm text-gray-500 dark:text-gray-400">
+					>{subtitle}
-													{location.latitude?.toFixed(2)}°N, {location.longitude?.toFixed(2)}°E
-													{#if location.elevation}• {location.elevation?.toFixed(0)}m{/if}
 				</p>
 			</div>
 		</div>
 
-										<!-- Current Weather -->
+		{#if actions}{@render actions()}{/if}
-										{#if currentWeather}
-											<div class="flex items-center space-x-3" in:fade={{ delay: 800 }}>
-												<div class="text-center">
-													<div class="mb-1 text-3xl">
-														{getWeatherIcon(currentWeather.current.weather_code)}
 	</div>
-													<div class="text-2xl font-bold text-gray-900 dark:text-white">
+{/if}
-														{Math.round(currentWeather.current.temperature_2m)}°C
-													</div>
-												</div>
-											</div>
-										{/if}
-									</div>
-								{/if}
 
-								<!-- Location Search -->
+{@render children?.()}
-								<div class="mt-6 border-t border-gray-200 pt-6 dark:border-gray-600">
-									<LocationSearch
-										label="🔍 Change location or search for a new city..."
-										on:location={(event) => {
-											storedLocation.set(event.detail);
-										}}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<!-- Stats Row (if location has population) -->
-						{#if location?.population}
-							<div
-								class="flex justify-center space-x-8 text-white/90"
-								in:fly={{ y: 20, duration: 600, delay: 600 }}
-							>
-								<div class="text-center">
-									<div class="text-sm font-medium">Population</div>
-									<div class="text-lg font-bold">{location.population.toLocaleString()}</div>
-								</div>
-								{#if location.timezone}
-									<div class="text-center">
-										<div class="text-sm font-medium">Timezone</div>
-										<div class="text-lg font-bold">{location.timezone}</div>
-									</div>
-								{/if}
-							</div>
-						{/if}
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		<!-- Decorative elements -->
-		<div class="pointer-events-none absolute top-0 left-0 h-full w-full overflow-hidden">
-			<div class="absolute -top-4 -right-4 h-24 w-24 rounded-full bg-white/10"></div>
-			<div class="absolute top-1/3 -left-8 h-16 w-16 rounded-full bg-white/5"></div>
-			<div class="absolute bottom-8 left-1/4 h-12 w-12 rounded-full bg-white/10"></div>
-		</div>
-	</div>
-
-	<!-- Main Content -->
-	<div class="container mx-auto px-6 py-8">
-		{#if mounted}
-			<div in:fade={{ duration: 600, delay: 400 }}>
-				{@render children?.()}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	:global(.container) {
-		max-width: 1200px;
-	}
-</style>

src/routes/weather/+layout.ts

@@ -1,14 +0,0 @@
-import { get } from 'svelte/store';
-
-import { storedLocation } from '$lib/stores/settings';
-
-import type { LayoutLoad } from '././$types';
-
-const location = get(storedLocation);
-
-export const load: LayoutLoad = async () => {
-	return {
-		title: `Weather ${location.name}`,
-		location: location
-	};
-};

src/routes/weather/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { goto } from '$app/navigation';
+
+	import { localizeHref } from '$lib/paraglide/runtime';
+
+	// Same reasoning as the root redirect: resolved in the browser so the
+	// visitor's language is known (see routes/+page.svelte).
+	onMount(() => {
+		goto(localizeHref('/weather/week/'), { replaceState: true });
+	});
+</script>

src/routes/weather/+page.ts

@@ -1,9 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-import type { PageLoad } from './$types';
-
-export const prerender = true;
-
-export const load: PageLoad = async () => {
-	throw redirect(303, '/weather/week/');
-};