diff --git a/.env.example b/.env.example
index bd2e6c1..49e3237 100644
--- a/.env.example
+++ b/.env.example
@@ -4,8 +4,11 @@
 #   ssh -N -L 5433:/var/run/postgresql/.s.PGSQL.5432 <brukernavn>@it2810-34.idi.ntnu.no
 DATABASE_URL=postgres://gruppe@localhost:5433/norwegian_explorer
 
-# På VM-en (koble til via socket i stedet for nettverk):
+# På VM-en (koble til via socket i stedet for nettverk). Backend skal lytte på port 3001,
+# og NODE_ENV=production skrur av GraphiQL:
 # DATABASE_URL=postgres://gruppe@%2Fvar%2Frun%2Fpostgresql/norwegian_explorer
+# PORT=3001
+# NODE_ENV=production
 
 # Lokal testing av passordtilbakestilling: lagrer e-post som .eml, sender ingenting.
 # APP_PUBLIC_URL=http://localhost:5173/
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..a45fd52
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+24
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..2c75786
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+dist
+node_modules
+**/node_modules.nosync
+package-lock.json
+server/data.nosync
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..75a894a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..b0d531a
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,101 @@
+# Retningslinjer for KI-assistenter
+
+Denne fila leses av KI-verktøy (Claude Code, Copilot, Codex m.fl.) som jobber i repoet. Den gjelder også for oss som skriver kode selv. Mennesket som ber om endringen er ansvarlig for alt som merges.
+
+## Prosjektet
+
+Norwegian Explorer: søkbar katalog over turer i Norge. React + TypeScript + Vite i frontend, GraphQL (Yoga) i Node/TypeScript i backend, PostgreSQL/PostGIS på VM-en. Oppgaven er et studieprosjekt i IT2810, og koden skal kunne leses av eksterne.
+
+Les [README.md](README.md) og [docs/arkitektur.md](docs/arkitektur.md) før du endrer noe større.
+
+## Struktur
+
+```
+src/pages/       Sider (Home, Profile, Fjellomrade)
+src/features/    Større deler (Explore, RouteBuilder, ElevationProfile)
+src/components/  Delte komponenter
+src/lib/         Hjelpefiler uten visning (graphql, format, gpx …)
+server/graphql/  Skjemaet delt etter tema, én modul per område
+server/services/ Spørringer og beregninger resolverne bruker
+server/lib/      Innlogging, grenser, e-post
+server/db/       Tilkobling og oppsett av appens tabeller
+docs/            Dokumentasjon
+```
+
+Legg ny kode i riktig mappe. Lag ikke nye filer i roten av `src/` eller `server/`.
+
+## Kommandoer
+
+Alt under skal gå uten feil før du sier at noe er ferdig:
+
+```bash
+npm run format:check   # Prettier
+npm run lint           # ESLint
+npx tsc -b             # typesjekk
+npm run build          # bygg
+```
+
+Kjør `npm run format` for å rette formatering. Start lokalt med `npm run dev:server` og `npm run dev`.
+
+## Kodekvalitet
+
+- **Gjenbruk før du skriver nytt.** Søk i `src/lib/`, `server/lib/` og nabofilene først. Sjekk spesielt:
+  - `graphql()` i `src/lib/graphql.ts` for alle kall mot backend. Bruk aldri `fetch` direkte.
+  - `checkSession()` og `TOKEN_KEY` for innlogging. Ikke skriv tokennøkkelen som tekst.
+  - `formatKm()` i `src/lib/format.ts` og `lengthText()` for lengder.
+  - `authed()` i `server/lib/auth.ts` for resolvere som krever innlogging, og `setPassword()` for passordbytte.
+- **Ikke kopier kode.** Står det samme i to filer, flytt det til én felles funksjon.
+- **Del opp filer der det er naturlig.** Én fil skal ha ett tydelig ansvar. Trenger du å bla lenge for å finne ting, eller blander filen flere ansvar (for eksempel datahenting, kart og visning), er det tid for å dele den. Del etter ansvar og ikke etter linjeantall, og ikke del opp bare for å komme under en grense.
+- **TypeScript overalt.** Ingen `.js` eller `.mjs`. Unngå `any`. Trengs det, skriv en kort kommentar om hvorfor.
+- **Alle kall mot serveren skal ha timeout** og vise en forståelig feil til brukeren.
+- **Ingen ubrukt kode.** Fjern døde imports, filer og kommentert-ut kode. Ikke legg igjen malfiler.
+- **Søk, filtrering og sortering skjer på serveren** i SQL, aldri bare på det klienten har lastet.
+- **Kommentarer på norsk**, som forklarer hvorfor, ikke hva. Koden skal kunne leses av eksterne.
+
+## Tilgjengelighet og bærekraft
+
+- Alle interaktive elementer skal kunne brukes med tastatur og ha tydelig fokus og navn (`aria-label`, `<label>`).
+- Bruk semantisk HTML først, ARIA bare når det trengs. Statusmeldinger bruker `role="status"` eller `role="alert"`.
+- Ikke bruk farge alene for å vise noe. Hold god kontrast.
+- Kartet skal alltid ha en listevisning som alternativ.
+- Last ikke mer data enn nødvendig: paginer, hent bare synlig kartutsnitt, og legg ikke til tunge biblioteker uten å vurdere størrelsen.
+
+## Dokumentasjon underveis
+
+Dokumentasjon er en del av endringen, ikke noe som gjøres etterpå.
+
+- Endrer du struktur, kommandoer, miljøvariabler eller hvor noe hentes fra: oppdater `README.md`, `server/README.md` og `docs/arkitektur.md` i samme commit.
+- Flytter eller omdøper du filer: søk etter gamle filnavn i alle `.md`-filer og rett dem.
+- Legger du til en spørring, mutasjon eller tabell: beskriv den i `server/README.md`.
+- Nye teknologivalg: skriv kort hvorfor du valgte det, ikke bare hva.
+- Skriv på norsk i klar tekst. Ikke påstå at noe er testet hvis det ikke er det.
+
+## Bruk av KI skal dokumenteres
+
+Oppgaven krever at vi viser hvordan KI brukes og at vi har egen kontroll.
+
+- Legg til en rad i [docs/bruk-av-ki.md](docs/bruk-av-ki.md) for hver større endring KI har gjort.
+- Skriv i PR-beskrivelsen hva KI gjorde, hva du selv leste og endret, og hva du testet manuelt.
+- Hold KI-endringer små og samlet om ett tema, så de kan leses gjennom.
+
+## Git
+
+- **Commit-meldinger:** Conventional Commits med norsk tekst: `feat:`, `fix:`, `refactor:`, `style:`, `chore:`, `docs:`, `test:`. Eksempel: `fix: sett timeout på kall i profilen`.
+- Én commit per tema. Formatering og refaktorering skal ikke blandes med funksjonelle endringer.
+- Ikke push til `main`. Lag en gren og en pull request. Alle PR-er må godkjennes av noen i gruppa som ikke selv har pushet koden (se `.github/CODEOWNERS`).
+- Ikke commit `.env`, `node_modules`, `dist` eller andre filer som er ignorert.
+- Ikke commit før du er bedt om det.
+
+## Forsiktig med
+
+- **Den delte databasen.** Ikke opprett brukere, endre tabeller eller kjør `ALTER`/`DROP` mot VM-databasen for å teste. Lag test-data lokalt, eller spør først.
+- **Hemmeligheter.** Ikke skriv passord, tokens eller `DATABASE_URL` med passord inn i kode, dokumentasjon eller commit-meldinger.
+- **Sikkerhet.** All SQL bruker parameteriserte spørringer (`$1`, `$2`). Sett aldri brukerinput rett inn i en SQL-streng. Valider input i resolverne.
+- **Utenfor oppgaven.** Gjør bare det som er bedt om. Ser du noe annet som bør rettes, skriv det som et forslag i stedet for å endre det.
+
+## Før du er ferdig
+
+1. Alle fire kommandoene over går gjennom.
+2. Dokumentasjonen er oppdatert.
+3. Du har sagt ærlig hva som er testet og hva som ikke er det.
+4. Det er ingen ubrukte filer eller duplisert kode igjen.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..bf6be63
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,3 @@
+Alle retningslinjer for dette repoet står i AGENTS.md. Følg dem.
+
+@AGENTS.md
diff --git a/README.md b/README.md
index fb961e9..d8d2944 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,52 @@
 
 Norwegian Explorer viser registrerte fotruter i Norge med søk, kart og rutedetaljer. Frontend er laget med React, TypeScript og Vite. Backend bruker GraphQL, Node.js og PostgreSQL/PostGIS.
 
+## Kom i gang
+
+Slik installerer og kjører du appen lokalt. Backend henter alle data fra databasen på gruppas VM, så du trenger tilgang til VM-en (NTNU-nettet eller VPN).
+
+**Forutsetninger**
+
+- **Node 24** (22.18 eller nyere fungerer). Backend kjører `.ts`-filene direkte, så den trenger ikke bygges. Sjekk med `node -v`, og bruk gjerne `nvm install` i prosjektmappen, som leser `.nvmrc`.
+- En SSH-bruker på VM-en (`it2810-34.idi.ntnu.no`), siden databasen bare nås derfra.
+
+**Steg**
+
+1. Installer avhengighetene:
+
+   ```bash
+   npm ci
+   ```
+
+2. Lag `.env` fra malen. Den peker på databasen gjennom en SSH-tunnel, og trenger normalt ingen endringer:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+3. Åpne tunnelen til databasen i en egen terminal, og la den stå åpen (bytt `brukernavn`):
+
+   ```bash
+   ssh -N -L 5433:/var/run/postgresql/.s.PGSQL.5432 brukernavn@it2810-34.idi.ntnu.no
+   ```
+
+4. Start backend i en ny terminal. Den lytter på `127.0.0.1:4000`, og GraphiQL ligger på <http://127.0.0.1:4000/graphql>:
+
+   ```bash
+   npm run dev:server
+   ```
+
+5. Start frontend i en tredje terminal, og åpne <http://localhost:5173>. Vite sender `/graphql` videre til backend:
+
+   ```bash
+   npm run dev
+   ```
+
+Slik publiseres appen på VM-en: se [Publisering på VM-en](#publisering-på-vm-en). Hvordan backend er bygget opp, står i [server/README.md](server/README.md), og oppsettet på VM-en i [docs/oppsett-vm.md](docs/oppsett-vm.md). Den publiserte versjonen ligger på <http://it2810-34.idi.ntnu.no/project2/>.
+
 ## Data og API
 
-Kartverkets Tur- og friluftsruter, kommune- og fylkesgrenser og OpenStreetMap-uttrekket er importert i PostgreSQL-databasen `norwegian_explorer` på VM-en. Den bearbeidede rutekatalogen og områdekoblingene er også importert. Frontend henter data gjennom GraphQL-endepunktet `/graphql` i `server/index.mjs`.
+Kartverkets Tur- og friluftsruter, kommune- og fylkesgrenser og OpenStreetMap-uttrekket er importert i PostgreSQL-databasen `norwegian_explorer` på VM-en. Den bearbeidede rutekatalogen og områdekoblingene er også importert. Frontend henter data gjennom GraphQL-endepunktet `/graphql` (se `server/graphql/`).
 
 Gruppemedlemmer som er logget inn på VM-en via SSH, kan åpne databasen med:
 
@@ -31,20 +74,25 @@ Det finnes ingen offisiell avgrensning av landskapsområder som «Jotunheimen»,
 
 Mange hytter ligger like utenfor vernegrensene, så grensene fra OSM og Miljødirektoratet er utvidet med 3 km. De er også forenklet til omtrent 100 m nøyaktighet, så SQL-fila holder seg liten, og hver rad har en kommentar om hvor grensen kommer fra. Kolonnen `ssr_id` peker til Kartverkets offisielle navn i stedsnavnregisteret (SSR) der området er registrert. Grensen ligger i én kolonne av typen `MultiPolygon`, og både opptellingen og turpunktene på kartet hentes med `ST_Intersects` mot den.
 
-## Start databaseversjonen lokalt
-
-PostgreSQL må kjøre, og databasen `norwegian_explorer` må inneholde det importerte Kartverket-skjemaet. Kjør deretter i to terminaler:
+## Mappestruktur
 
-```bash
-npm run dev:server
 ```
-
-```bash
-npm run dev
+src/
+  pages/        Sidene: Home, Profile og Fjellomrade (egen inngang i fjellomrade.html)
+  features/     Større deler av appen: Explore (søk og kart), RouteBuilder, ElevationProfile
+  components/   Delte komponenter, for eksempel SiteNav
+  lib/          Hjelpefiler uten visning: GraphQL-klient, rutetyper og søkespørringer, formatering, GPX,
+                hooks (useDebouncedValue, useAuthenticated)
+server/
+  graphql/      Skjemaet delt etter tema: routes, auth, profile, builder, mountains
+  services/     Spørringer og beregninger som resolverne bruker
+  lib/          Innlogging, grenser for forespørsler og e-post
+  db/           Databasetilkobling og oppsett av appens tabeller
+  sql/          SQL-filer som kjøres for hånd i DBeaver
+deploy/         Eksempler på Apache- og systemd-konfigurasjon for VM-en
+docs/           Dokumentasjon
 ```
 
-Vite sender `/graphql` videre til backend på `127.0.0.1:4000`.
-
 ## Profiler
 
 Ved oppstart oppretter backend skjemaet `norwegian_explorer_app` med tabeller for brukere, sesjoner og favoritter. Brukeren kan:
@@ -58,6 +106,19 @@ Passord hashes med Node.js `scrypt` og en tilfeldig salt. Sesjonstoken lagres so
 
 Favoritter kobles til den stabile rute-ID-en, slik at like rutenavn eller rutenumre ikke blandes sammen.
 
+## Publisering på VM-en
+
+Appen ligger på `http://it2810-34.idi.ntnu.no/project2/`. Frontend bygges med `npm run build` (som setter riktig adresse, `/project2/`) og kopieres til Apache. Backend kjører som en tjeneste på VM-en på port 3001, og Apache sender `/project2/graphql` videre til den. Konfigurasjonsfilene ligger i [deploy/](deploy/), og steg for steg står i [docs/oppsett-vm.md](docs/oppsett-vm.md).
+
+Du kan prøve produksjonsbygget lokalt, med kallene sendt til backend på samme måte som Apache gjør:
+
+```bash
+npm run build
+npm run preview
+```
+
+Åpne <http://localhost:4173/project2/> mens backend kjører (`npm run dev:server`).
+
 ## Bygg og kontroll
 
 ```bash
diff --git a/deploy/apache-project2.conf.example b/deploy/apache-project2.conf.example
new file mode 100644
index 0000000..b2d8f0e
--- /dev/null
+++ b/deploy/apache-project2.conf.example
@@ -0,0 +1,12 @@
+# Sender kall fra appen til backend, som kjører på VM-en på port 3001.
+# Kopier denne filen til /etc/apache2/conf-available/project2.conf på VM-en, og kjør:
+#   sudo a2enmod proxy proxy_http
+#   sudo a2enconf project2
+#   sudo systemctl reload apache2
+# Appen (de bygde filene) ligger i /var/www/html/project2/ og trenger ingen egen konfigurasjon.
+
+# Noen kall (rutebygger, høydeprofil) kan ta tid, så vi venter lenger enn standard
+ProxyTimeout 90
+
+ProxyPass "/project2/graphql" "http://127.0.0.1:3001/graphql"
+ProxyPassReverse "/project2/graphql" "http://127.0.0.1:3001/graphql"
diff --git a/deploy/project2-backend.service.example b/deploy/project2-backend.service.example
new file mode 100644
index 0000000..d67fbd9
--- /dev/null
+++ b/deploy/project2-backend.service.example
@@ -0,0 +1,23 @@
+# Holder backend i gang på VM-en og starter den på nytt hvis den stopper eller VM-en startes på nytt.
+# Bytt ut BRUKERNAVN med brukernavnet ditt på VM-en.
+# Bytt også ut stien til node (ExecStart). Sjekk den med: which node
+# Er node installert med nvm, ligger den under ~/.nvm/versions/node/<versjon>/bin/node. Systemd leser
+# ikke .bashrc, så stien må skrives helt ut.
+# Kopier denne filen til /etc/systemd/system/project2-backend.service, og kjør:
+#   sudo systemctl daemon-reload
+#   sudo systemctl enable --now project2-backend
+# Se loggen med: journalctl -u project2-backend -f
+[Unit]
+Description=Norwegian Explorer backend (project2)
+After=network.target postgresql.service
+
+[Service]
+Type=simple
+User=BRUKERNAVN
+WorkingDirectory=/home/BRUKERNAVN/project2
+ExecStart=/home/BRUKERNAVN/.nvm/versions/node/NODE-VERSJON/bin/node --env-file=.env server/index.ts
+Restart=on-failure
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
diff --git a/docs/arkitektur.md b/docs/arkitektur.md
new file mode 100644
index 0000000..9e30bab
--- /dev/null
+++ b/docs/arkitektur.md
@@ -0,0 +1,72 @@
+# Arkitektur
+
+Denne fila forklarer hvordan appen henger sammen, og hvor dataene kommer fra. Mappene er beskrevet i [README.md](../README.md#mappestruktur), og databasen og fjelldelen i [server/README.md](../server/README.md).
+
+## Oversikt
+
+```
+Nettleser (React + Vite)  ──  /graphql  ──>  Node-server (GraphQL Yoga)  ──>  PostgreSQL + PostGIS
+   src/                                          server/                          på VM-en
+```
+
+All kommunikasjon mellom klient og server går gjennom ett GraphQL-endepunkt, `/graphql`. Under utvikling sender Vite kallene videre til serveren på `127.0.0.1:4000` (se `vite.config.ts`).
+
+## Frontend
+
+- **Sider** ligger i `src/pages/`. `App.tsx` velger hvilken som vises, og navigerer med URL-fragmentet (`#explore`, `#profile`, `#reset-password/…`) i stedet for et eget ruterbibliotek.
+- **Tilstand** holdes med Reacts egne hooks. `App.tsx` eier det som deles mellom sidene: innlogging og valgt tur. Resten ligger lokalt i komponentene.
+- **Henting av data** går gjennom én funksjon, `graphql()` i `src/lib/graphql.ts`. Den sender spørringen, setter timeout og gjør feil om til lesbare meldinger. Ingen annen kode bruker `fetch` mot serveren.
+- **Innlogging:** tokenet fra serveren lagres i `localStorage` under `TOKEN_KEY`. `checkSession()` i `src/lib/graphql.ts` sjekker om det fortsatt gjelder, og fjerner det hvis ikke. `App.tsx`, `lib/useAuthenticated.ts` (som siden med fjellområder bruker) og `AuthGate.tsx` bruker den samme funksjonen.
+- **Søk:** forsiden og Utforsk bruker samme søkespørring og typer fra `src/lib/routeSearch.ts` og `src/lib/routeTypes.ts`. `useDebouncedValue` i `src/lib/` venter på at brukeren slutter å skrive, før et søk sendes.
+- **Sider med mye innhold er delt i mapper:** `pages/Profile/` har en fil per fane (`OverviewTab`, `SettingsTab`, `TripsTab`), `AuthGate` og `profileApi.ts` med alle kall mot profilen. `pages/Fjellomrade/` har oversikten, områdevisningen, kartet og `data.ts`. `features/RouteBuilder/` har kartet (`useBuilderMap`), søket, rundturforslag, punkter og `builderApi.ts`.
+- **Formatering** av tall og lengder ligger i `src/lib/format.ts` (`formatKm`) og `lengthText` i `src/lib/routeTypes.ts`, så alle sider viser lengder likt.
+
+### Utforsk (`src/features/Explore/`)
+
+Utforsk er hovedsiden: søk, filtre, liste og kart.
+
+- Søkefeltet venter litt etter siste tastetrykk før det spør serveren (debounce), så det ikke sendes et kall per tegn.
+- Kartet (MapLibre) melder fra om synlig utsnitt etter en kort pause, og bare turer i utsnittet hentes.
+- Listen er delt i sider på 12 (`PAGE_SIZE`). Klienten sender `offset` og `limit`.
+- **Søk, filtrering og sortering skjer på serveren**, i SQL, og gjelder hele resultatsettet, ikke bare det som er lastet inn.
+
+## Backend
+
+`server/index.ts` setter sammen skjemaet fra modulene i `server/graphql/`:
+
+| Modul                  | Ansvar                                                            |
+| ---------------------- | ----------------------------------------------------------------- |
+| `graphql/routes.ts`    | Tursøk, rutedetaljer, populære turer, kommuner, OSM i kartutsnitt |
+| `graphql/auth.ts`      | Registrering, innlogging, passord                                 |
+| `graphql/profile.ts`   | Favoritter, turstatus, dagbok, månedsmål, «Mitt sted»             |
+| `graphql/builder.ts`   | Egne ruter, rundturforslag, høydeprofil, stopp langs turen        |
+| `graphql/mountains.ts` | Fjellområder og turpunkter                                        |
+
+**Innlogging og sikkerhet**
+
+- Passord lagres som scrypt-hash med eget salt, aldri i klartekst.
+- Innloggingen gir et tilfeldig token. Databasen lagrer bare en hash av tokenet, og sesjonen varer 30 dager.
+- Resolvere som krever innlogging er pakket i `authed()` (`server/lib/auth.ts`). Den sjekker tokenet før noe annet skjer.
+- `server/lib/authLimits.ts` begrenser antall forsøk, og `server/lib/requestSafety.ts` setter grenser for størrelsen på spørringer.
+
+**Mellomlagring:** fjellområdene huskes i 10 minutter og høydeprofiler i 1 time, fordi dataene sjelden endres og beregningen er dyr.
+
+## Database
+
+Alt ligger i databasen `norwegian_explorer` på VM-en, delt i skjemaer:
+
+| Skjema                   | Innhold                                                                                  |
+| ------------------------ | ---------------------------------------------------------------------------------------- |
+| `turogfriluftsruter_…`   | Kartverkets rådata (endres ikke)                                                         |
+| `norwegian_explorer_app` | Appens egne tabeller: brukere, sesjoner, favoritter, turer, mål, egne ruter, rutekatalog |
+| `silver`                 | Rensede data for fjelldelen                                                              |
+| `osm_import`             | OpenStreetMap-uttrekket                                                                  |
+
+Brukergenererte data (profiler, favoritter, turstatus, dagbok, mål og egne ruter) lagres i `norwegian_explorer_app` og vises igjen når brukeren logger inn.
+
+## Slik legger du til noe nytt
+
+- **Ny spørring eller mutasjon:** legg typene og resolveren i riktig modul i `server/graphql/`. Krever den innlogging, pakk den i `authed()`. Kall den fra klienten med `graphql()`.
+- **Ny endring på databasen som må være atomisk:** bruk `withTransaction()` i `server/db/db.ts`, som committer eller ruller tilbake og alltid gir tilkoblingen tilbake. Delte kontroller av input (rute-id, passord, kartutsnitt) ligger i `server/lib/validation.ts`.
+- **Ny side:** lag en mappe i `src/pages/`, og vis den fra `App.tsx`.
+- **Ny delt hjelpefunksjon:** legg den i `src/lib/` (frontend) eller `server/lib/` (backend), og sjekk først om den finnes.
diff --git a/docs/bruk-av-ki.md b/docs/bruk-av-ki.md
new file mode 100644
index 0000000..12a5478
--- /dev/null
+++ b/docs/bruk-av-ki.md
@@ -0,0 +1,43 @@
+# Bruk av KI
+
+> **Utkast.** Oppgaven krever god dokumentasjon av hvordan KI brukes, og at dere viser egen kontroll og plan. Det første avsnittet beskriver arbeidet KI gjorde i én arbeidsøkt. Resten må gruppa fylle ut selv.
+
+## Verktøy
+
+Claude Code (Anthropics kodeassistent) er brukt i terminalen og i skrivebordsappen, direkte i repoet.
+
+## Hva KI har gjort
+
+| Oppgave                                                                                     | Commit-melding                                                                  |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| Satt opp Prettier og la lint hoppe over `node_modules.nosync`                               | `chore: sett opp Prettier og la lint hoppe over node_modules.nosync`            |
+| Formatert all kode med Prettier                                                             | `style: formater all kode med Prettier`                                         |
+| Gått gjennom koden og slått sammen gjentatt kode i frontend, og rettet en manglende timeout | `refactor: samle gjentatt kode i frontend og rett manglende timeout i profilen` |
+| Fjernet ubrukte malfiler og rettet utdaterte filnavn i dokumentasjonen                      | `chore: fjern ubrukte malfiler og rett utdaterte filnavn i dokumentasjon`       |
+| Delt backend i moduler og samlet gjentatt kode (`authed()`, `setPassword()`)                | `refactor: del opp backend i moduler og fjern gjentatt kode`                    |
+| Ordnet frontend i mapper (`pages`, `features`, `components`, `lib`)                         | `refactor: ordne frontend i mappene pages, features, components og lib`         |
+| Skrevet utkast til dokumentasjon i `docs/`                                                  |                                                                                 |
+
+## Hvordan arbeidet ble kontrollert
+
+KI-en kjørte `npm run lint`, `npx tsc -b`, `npm run build` og `npm run format:check` etter hver endring, og testet backend ved å spørre GraphQL-endepunktet direkte. Skjemaet ble sammenlignet før og etter delingen av backend: alle 18 spørringer og 14 mutasjoner er der fortsatt.
+
+**Ikke testet automatisk:** vellykket innlogging, registrering og passordbytte, siden de ville opprettet brukere i den delte databasen. Dette må sjekkes manuelt.
+
+## Gruppas egen kontroll
+
+> **Fylles ut av gruppa.** Beskriv hva dere selv har gjort:
+>
+> - Hvem leste gjennom endringene, og hva ble funnet eller endret?
+> - Hvilke pull requests og issues hører til, og hvem godkjente dem?
+> - Hva ble prøvd manuelt i nettleseren før merge?
+> - Hvilke forslag fra KI ble avvist eller endret, og hvorfor?
+> - Hvilke deler av koden er skrevet uten KI?
+
+## Vurdering av KI-forslag
+
+> **Fylles ut av gruppa.** Eksempel på hva som kan stå her: KI foreslo å slette `RouteBuilder.tsx` fordi den ikke er importert noe sted, men gruppa vurderte at den skal beholdes.
+
+## Ansvar
+
+Gruppa er ansvarlig for all kode i repoet, uansett hvem eller hva som har skrevet den. Alt som er merget skal være lest og forstått av minst ett medlem utenom den som laget det.
diff --git a/docs/oppsett-vm.md b/docs/oppsett-vm.md
new file mode 100644
index 0000000..26ffc78
--- /dev/null
+++ b/docs/oppsett-vm.md
@@ -0,0 +1,129 @@
+# Oppsett på den virtuelle maskinen
+
+> **Prøvd på VM-en 16. oktober 2026.** Oppsettet under er kjørt på `it2810-34` og virker: backend som systemd-tjeneste på port 3001, Apache sender `/project2/graphql` til den, og frontend ligger i `/var/www/html/project2/`. Node ble installert med nvm (v26.12.0, som fungerer like bra som 24).
+
+Adresse: `http://it2810-34.idi.ntnu.no/project2/`. Alt kjører direkte på VM-en, ikke i Docker. VM-en nås bare fra NTNU-nettet eller med VPN.
+
+**Én person om gangen:** Backend skal ligge under én bruker på VM-en og startes og stoppes av én person om gangen. Hvis to starter hver sin backend, eller en gammel kjører under en annen bruker, blir port 3001 opptatt og den nye får ikke startet. Se «Når noe ikke starter» nederst.
+
+## Det som ligger på VM-en nå
+
+- **Kode:** `~/project2` (kopiert fra Mac-en med `rsync`). Når alt er pushet til `main`, kan det byttes til `git clone` og `git pull`.
+- **Backend:** tjenesten `project2-backend`, som kjører som brukeren `ktmidtha`. Styres med `systemctl status|restart project2-backend`.
+- **Frontend:** `/var/www/html/project2/`, med forrige innleverings versjon i sikkerhetskopi i `~/project2-backup`.
+- **Apache:** `/etc/apache2/conf-available/project2.conf` (aktivert med `a2enconf project2`).
+
+## Slik henger det sammen
+
+```
+Nettleser ──> Apache (port 80)
+                ├─ /project2/            statiske filer i /var/www/html/project2/
+                └─ /project2/graphql ──> Node-backend på 127.0.0.1:3001 ──> PostgreSQL (socket)
+```
+
+Frontend og backend har samme adresse utad, så nettleseren trenger ikke CORS. Backend lytter bare på `127.0.0.1` og nås kun via Apache.
+
+## Filene i `deploy/`
+
+| Fil                                       | Kopieres til                                   | Hva den gjør                                               |
+| ----------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------- |
+| `deploy/apache-project2.conf.example`     | `/etc/apache2/conf-available/project2.conf`    | Sender `/project2/graphql` til backend på port 3001        |
+| `deploy/project2-backend.service.example` | `/etc/systemd/system/project2-backend.service` | Holder backend i gang og starter den på nytt etter omstart |
+
+## Engangsoppsett (backend)
+
+Logg inn på VM-en (`ssh dittbrukernavn@it2810-34.idi.ntnu.no`).
+
+1. **Node:** backend kjører `.ts`-filene direkte (type stripping), så den trenger ikke kompileres. Det krever Node 24 (22.18 eller nyere kan fungere). Sjekk med `node -v`. Kurset anbefaler å installere Node med `nvm`, som gir en installasjon bare for din bruker:
+   ```bash
+   touch ~/.bash_profile
+   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
+   ```
+   Åpne en ny terminal og kjør `nvm install node`. Da ligger node under `~/.nvm/versions/node/<versjon>/bin/node`, og den stien trengs i steg 5.
+2. **Kode:** hent repoet, for eksempel `git clone https://git.ntnu.no/IT2810-H26/T34-Project-2.git ~/project2`, og kjør `cd ~/project2 && npm ci --omit=dev`.
+3. **Innstillinger:** kopier `.env.example` til `.env` og fjern kommentartegnet på VM-linjene:
+   ```
+   DATABASE_URL=postgres://gruppe@%2Fvar%2Frun%2Fpostgresql/norwegian_explorer
+   PORT=3001
+   NODE_ENV=production
+   ```
+   `.env` skal aldri committes. Fagstaben kan lese den med sudo.
+4. **Test databasen:** `psql "postgres://gruppe@%2Fvar%2Frun%2Fpostgresql/norwegian_explorer" -c "select 1"`. Feiler det, må brukeren få tilgang til databasen (se «Database» under).
+5. **Backend som tjeneste:** backend må fortsette å kjøre etter at du logger ut av terminalen. Vi bruker systemd, som også starter den på nytt hvis den stopper eller VM-en startes på nytt. Kopier `deploy/project2-backend.service.example` til `/etc/systemd/system/project2-backend.service`, bytt ut `BRUKERNAVN`, og sett inn hele stien til node (finn den med `which node`; med nvm er den ikke `/usr/bin/node`). Kjør så:
+   ```bash
+   sudo systemctl daemon-reload
+   sudo systemctl enable --now project2-backend
+   curl -s -X POST -H 'Content-Type: application/json' -d '{"query":"{__typename}"}' http://127.0.0.1:3001/graphql
+   ```
+   Svaret skal være `{"data":{"__typename":"Query"}}`. Loggen ser du med `journalctl -u project2-backend -f`.
+6. **Apache:** kopier `deploy/apache-project2.conf.example` til `/etc/apache2/conf-available/project2.conf`, og kjør:
+   ```bash
+   sudo a2enmod proxy proxy_http
+   sudo a2enconf project2
+   sudo systemctl reload apache2
+   ```
+
+## Legge ut en ny versjon
+
+**Frontend** (som i prosjekt 1). Kjør fra prosjektmappen på din egen maskin:
+
+```bash
+npm run build
+rsync -a --exclude cesium dist/ dittbrukernavn@it2810-34.idi.ntnu.no:~/project2-filer/
+ssh dittbrukernavn@it2810-34.idi.ntnu.no
+sudo cp -r ~/project2-filer/* /var/www/html/project2/
+```
+
+`npm run build` bygger med riktig `base` (`/project2/`), så du trenger ikke sette noe selv. `--exclude cesium` hopper over en gammel mappe som kan ligge i `public/` lokalt og ikke brukes av appen.
+
+**Backend** (på VM-en):
+
+```bash
+cd ~/project2 && git pull && npm ci --omit=dev
+sudo systemctl restart project2-backend
+```
+
+## Test hele kjeden
+
+Fra din egen maskin, med VPN eller på NTNU-nettet:
+
+```bash
+curl -s -X POST -H 'Content-Type: application/json' -d '{"query":"{__typename}"}' http://it2810-34.idi.ntnu.no/project2/graphql
+```
+
+Åpne deretter `http://it2810-34.idi.ntnu.no/project2/`. Forsiden skal vise turforslag, og Utforsk skal vise turer og kart. Det betyr at siden når backend, og at backend når databasen.
+
+## Når noe ikke starter
+
+Port 3001 er ofte opptatt av en gammel backend. Se hva som kjører:
+
+```bash
+ps -Af | grep node
+```
+
+Stopp den med `kill <prosessnummer>`. Kjører den under en annen bruker, bruk `sudo kill <prosessnummer>`, og `sudo kill -9 <prosessnummer>` hvis den ikke svarer. Se også om en gammel tjeneste starter den på nytt (`systemctl list-units --type=service | grep -i project`).
+
+**Alternativer til systemd.** Kurset nevner to enklere måter å holde backend i gang:
+
+- `nohup node --env-file=.env server/index.ts &` (avsluttes ikke når du logger ut, men starter ikke på nytt etter omstart av VM-en)
+- `pm2` (`npm i -g pm2`, så `pm2 start server/index.ts --interpreter node --node-args="--env-file=.env" --name project2` og `pm2 save`)
+
+Unngå `nodemon` på VM-en (unødvendig, siden koden ikke endres der) og `forever` (utdatert).
+
+## Database
+
+- Databasen heter `norwegian_explorer` (PostgreSQL med PostGIS), og dataene er importert fra Kartverket og OpenStreetMap (se `server/sql/` og `scripts/`).
+- Appen lager egne tabeller i skjemaet `norwegian_explorer_app` ved oppstart. Er tabellene laget av en annen bruker enn den backend kobler til som, hopper backend over oppsettet og bruker tabellene som de er. Kolonnen for «Mitt sted» må da legges til av eieren (se `server/sql/app/home_municipality.sql`).
+- Brukergenererte data (profiler, favoritter, turer, mål og egne ruter) lagres i denne databasen.
+
+## Sjekkliste
+
+- [x] Node 24 (eller nyere) installert på VM-en (nvm, v26.12.0)
+- [x] Repoet klonet og `npm ci --omit=dev` kjørt
+- [x] `.env` laget med `DATABASE_URL`, `PORT=3001` og `NODE_ENV=production`
+- [x] Databasen kan nås som `gruppe` via socket
+- [x] `project2-backend` kjører og svarer på `http://127.0.0.1:3001/graphql`
+- [x] Apache-konfigurasjonen er aktivert
+- [x] Frontend er kopiert til `/var/www/html/project2/`
+- [x] `http://it2810-34.idi.ntnu.no/project2/` viser turer fra databasen
+- [ ] Informasjonen som trengs for å starte backend er tilgjengelig for fagstaben (krav i oppgaven: dokumentert på git, eller i en fil de kan lese med sudo på VM-en). Dekkes av dette dokumentet, `deploy/` og `.env.example` når de er pushet
diff --git a/utforsk-norge-prosjektplan.md b/docs/utforsk-norge-prosjektplan.md
similarity index 71%
rename from utforsk-norge-prosjektplan.md
rename to docs/utforsk-norge-prosjektplan.md
index 784dc15..2a691bb 100644
--- a/utforsk-norge-prosjektplan.md
+++ b/docs/utforsk-norge-prosjektplan.md
@@ -24,13 +24,13 @@ Søk, filtrering, sortering og paginering utføres på backend. Kartet henter ru
 
 ### Alternative datakilder og API-er
 
-| Kilde | Mulig bruk | Viktig begrensning |
-| --- | --- | --- |
-| [Kartverkets turrutedatabase](https://kartverket.no/api-og-data/friluftsliv) | Hovedkilde for merkede ruter og fasiliteter. Tilgjengelig som nedlasting og WFS. | Inneholder ruter, ikke ferdige turforslag. |
-| [OpenStreetMap / Overpass API](https://wiki.openstreetmap.org/wiki/Overpass_API) | Hente stier, turruter og steder til en prototype eller som supplement. | Varierende datakvalitet og begrenset kapasitet på offentlige API-servere. |
-| [OpenStreetMap-uttrekk](https://wiki.openstreetmap.org/wiki/Extract) | Importere et geografisk utvalg i egen database for søk og filtrering. | Krever bearbeiding av rådata og korrekt kreditering. |
-| [Kartverkets stedsnavn-API](https://kartverket.no/api-og-data/stedsnavndata/brukarrettleiing-stadnamn-api) | Søke etter steder og finne posisjoner for områdesøk. | Gir stedsnavn, ikke turer. |
-| [Kartverkets høydeprofil-API](https://kartverket.no/api-og-data/friluftsliv/hoydeprofil) | Vise høydeprofil for en valgt rute. | WPS-tjenesten er oppgitt som eksperimentell. |
+| Kilde                                                                                                      | Mulig bruk                                                                       | Viktig begrensning                                                        |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| [Kartverkets turrutedatabase](https://kartverket.no/api-og-data/friluftsliv)                               | Hovedkilde for merkede ruter og fasiliteter. Tilgjengelig som nedlasting og WFS. | Inneholder ruter, ikke ferdige turforslag.                                |
+| [OpenStreetMap / Overpass API](https://wiki.openstreetmap.org/wiki/Overpass_API)                           | Hente stier, turruter og steder til en prototype eller som supplement.           | Varierende datakvalitet og begrenset kapasitet på offentlige API-servere. |
+| [OpenStreetMap-uttrekk](https://wiki.openstreetmap.org/wiki/Extract)                                       | Importere et geografisk utvalg i egen database for søk og filtrering.            | Krever bearbeiding av rådata og korrekt kreditering.                      |
+| [Kartverkets stedsnavn-API](https://kartverket.no/api-og-data/stedsnavndata/brukarrettleiing-stadnamn-api) | Søke etter steder og finne posisjoner for områdesøk.                             | Gir stedsnavn, ikke turer.                                                |
+| [Kartverkets høydeprofil-API](https://kartverket.no/api-og-data/friluftsliv/hoydeprofil)                   | Vise høydeprofil for en valgt rute.                                              | WPS-tjenesten er oppgitt som eksperimentell.                              |
 
 **Anbefaling:** Bruk PostgreSQL/PostGIS som prosjektets egen database og start med et begrenset utvalg fra Kartverket. Stedsnavn-API-et kan supplere søket. Undersøk tidlig om rutene er egnet som turer i appen; ferdige turforslag med beskrivelser må eventuelt lages eller hentes fra en annen kilde. [UT.no skiller også mellom ruter og turforslag](https://hjelp.ut.no/hc/no/articles/14781085383954-Om-turforslag-i-UT-admin). Vi bør ikke planlegge rundt et UT.no-API før tilgang og vilkår er bekreftet.
 
diff --git a/eslint.config.js b/eslint.config.js
index ef614d2..a471c5e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,10 +3,12 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import prettier from 'eslint-config-prettier'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  // *.nosync er node_modules flyttet ut av iCloud-synkronisering på Mac
+  globalIgnores(['dist', '**/node_modules.nosync']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [
@@ -14,6 +16,7 @@ export default defineConfig([
       tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
+      prettier,
     ],
     languageOptions: {
       globals: globals.browser,
diff --git a/fjellomrade.html b/fjellomrade.html
index b0d65c3..d7dbe83 100644
--- a/fjellomrade.html
+++ b/fjellomrade.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/fjellomrade-main.tsx"></script>
+    <script type="module" src="/src/pages/Fjellomrade/fjellomrade-main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index c225cea..e2ff67e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,12 +27,17 @@
         "@vitejs/plugin-react": "^6.1.1",
         "babel-plugin-react-compiler": "^1.0.0",
         "eslint": "^10.10.0",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.6",
         "globals": "^17.12.0",
+        "prettier": "^3.9.10",
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.69.0",
         "vite": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=22.18"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1987,6 +1992,22 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
@@ -3147,6 +3168,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.10.tgz",
+      "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/protocol-buffers-schema": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
diff --git a/package.json b/package.json
index 03e363a..3f09f88 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,18 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=22.18"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "dev:server": "node --env-file-if-exists=.env --watch server/index.ts",
-    "start:server": "node --env-file-if-exists=.env server/index.ts"
+    "start:server": "node --env-file-if-exists=.env server/index.ts",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "graphql": "^17.0.2",
@@ -31,9 +36,11 @@
     "@vitejs/plugin-react": "^6.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.10.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.6",
     "globals": "^17.12.0",
+    "prettier": "^3.9.10",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.69.0",
     "vite": "^8.3.0"
diff --git a/public/hero.svg b/public/hero.svg
deleted file mode 100644
index 9ec1f68..0000000
--- a/public/hero.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid slice">
-  <!-- Illustrasjon av norsk fjellandskap med fjord, laget for Norwegian Explorer. Fri til bruk i prosjektet. -->
-  <defs>
-    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#f2c39b"/>
-      <stop offset=".55" stop-color="#f7dfc2"/>
-      <stop offset="1" stop-color="#dce6df"/>
-    </linearGradient>
-    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#8fb4b6"/>
-      <stop offset="1" stop-color="#3f6f78"/>
-    </linearGradient>
-    <!-- Fjellformene brukes som maske, så snøen følger fjellsidene nøyaktig -->
-    <clipPath id="far"><path id="farShape" d="M0 450 L120 410 L230 430 L340 380 L450 420 L560 360 L660 395 L780 300 L860 330 L980 190 L1060 240 L1150 160 L1260 250 L1350 215 L1470 290 L1600 260 L1600 562 L0 562Z"/></clipPath>
-    <clipPath id="mid"><path id="midShape" d="M0 505 L120 478 L240 498 L360 462 L470 490 L570 458 L670 478 L770 438 L870 405 L960 335 L1040 298 L1120 328 L1210 278 L1320 338 L1420 318 L1600 372 L1600 562 L0 562Z"/></clipPath>
-  </defs>
-  <rect width="1600" height="800" fill="url(#sky)"/>
-  <circle cx="360" cy="230" r="62" fill="#fbebd3"/>
-
-  <!-- Fjerne fjell: lave til venstre, høyt massiv til høyre -->
-  <use href="#farShape" fill="#aebfc4"/>
-  <g clip-path="url(#far)" fill="#f5f7f5">
-    <path d="M920 180 H1040 V222 L1022 214 L1004 228 L986 216 L966 230 L944 218 L920 226Z"/>
-    <path d="M1080 150 H1230 V200 L1210 192 L1190 208 L1168 196 L1146 212 L1124 197 L1102 208 L1080 198Z"/>
-    <path d="M1300 205 H1400 V240 L1382 236 L1364 247 L1346 238 L1326 245 L1300 229Z"/>
-    <path d="M740 290 H820 V311 L806 318 L792 327 L778 317 L762 325 L740 322Z"/>
-  </g>
-
-  <!-- Midtre fjellrygg, sammenhengende fra venstre til høyre -->
-  <use href="#midShape" fill="#66867f"/>
-  <g clip-path="url(#mid)" fill="#e7edeb">
-    <path d="M1000 288 H1080 V308 L1064 316 L1050 326 L1036 316 L1020 325 L1000 311Z"/>
-    <path d="M1160 268 H1260 V299 L1242 304 L1226 313 L1210 303 L1192 313 L1174 304 L1160 300Z"/>
-  </g>
-
-  <!-- Tydelig strandlinje, så vannet -->
-  <rect y="556" width="1600" height="8" fill="#47685e"/>
-  <rect y="564" width="1600" height="236" fill="url(#water)"/>
-  <!-- Speilinger og små bølger -->
-  <path d="M60 600 h160 M300 590 h120 M520 610 h180 M140 660 h120 M420 700 h200 M700 650 h110 M60 740 h150" stroke="#cfe2e1" stroke-width="3" stroke-linecap="round" opacity=".55"/>
-  <ellipse cx="360" cy="620" rx="70" ry="6" fill="#f6e8d2" opacity=".45"/>
-  <ellipse cx="360" cy="650" rx="44" ry="4" fill="#f6e8d2" opacity=".35"/>
-
-  <!-- Knaus i forgrunnen til høyre, med bratt klippe ned i vannet -->
-  <path d="M1600 800 L870 800 L892 712 L918 646 C970 606 1050 580 1130 568 C1210 558 1300 566 1380 560 C1460 552 1530 536 1600 520Z" fill="#2f5243"/>
-  <path d="M870 800 L892 712 L918 646 L952 636 L934 712 L920 800Z" fill="#203a2f"/>
-  <path d="M1600 800 L990 800 C1100 770 1250 740 1400 715 C1480 702 1540 690 1600 680Z" fill="#26453a"/>
-  <g fill="#1f3a2d">
-    <path d="M1390 584 l16 -62 l16 62Z M1440 576 l22 -86 l22 86Z M1502 564 l18 -70 l18 70Z M1550 556 l20 -84 l20 84Z"/>
-  </g>
-
-  <!-- Fotturist med sekk og stav, ser utover fjorden -->
-  <g transform="translate(1200 563) scale(1.6)" fill="#1a2f25">
-    <circle cx="0" cy="-62" r="7.5"/>
-    <path d="M-6 -54 L5 -54 L8 -52 L16 -50 L18 -26 L8 -24 L6 -30 L-6 -30 L-8 -48Z"/>
-    <path d="M-6 -31 L-13 0 L-7.5 0 L0 -19 L3.5 0 L9 0 L5 -31Z"/>
-    <path d="M-6 -50 L-17 -38 L-14 -35 L-4 -44Z"/>
-    <path d="M-17 -41 L-14.5 -41 L-21 0 L-23.5 0Z"/>
-  </g>
-</svg>
diff --git a/public/icons.svg b/public/icons.svg
deleted file mode 100644
index e952219..0000000
--- a/public/icons.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
diff --git a/server/README.md b/server/README.md
index c26ba58..f253346 100644
--- a/server/README.md
+++ b/server/README.md
@@ -4,16 +4,30 @@ Backenden er én Node.js-server med ett GraphQL-endepunkt, `/graphql`. Den hente
 
 ## Oppsett
 
-| Fil | Hva den gjør |
-|---|---|
-| `index.mjs` | Starter serveren (GraphQL Yoga på `127.0.0.1:4000`). Inneholder rutesøket, innloggingen, profilene og favorittene, og kobler inn fjelldelen fra `server.ts`. |
-| `server.ts` | GraphQL-typene og -spørringene for fjellområdesiden. Starter ingen server selv, men legges til i skjemaet i `index.mjs`. |
-| `mountainAreas.ts` | Henter fjellområdene med nøkkeltall: antall hytter, buer, gapahuker og topper, og høyeste topp. |
-| `pointsOfInterest.ts` | Henter turpunktene i ett fjellområde, og søker etter turpunkter på navn. |
-| `db.ts` | Én felles tilkobling (`pg.Pool`) til databasen, som brukes av alle filene over. |
-| `sql/silver/*.sql` | SQL-filene som lager de rensede dataene fjelldelen henter fra. Kjøres for hånd i DBeaver. |
-
-`index.mjs` er JavaScript, mens fjelldelen er skrevet i TypeScript. Node 24 kjører `.ts`-filene direkte, siden den fjerner typene ved oppstart, så backenden trenger ikke bygges.
+| Fil                            | Hva den gjør                                                                                                         |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| `index.ts`                     | Starter serveren (GraphQL Yoga på `127.0.0.1:4000`) og setter skjemaet sammen av modulene i `graphql/`.              |
+| `graphql/routes.ts`            | Tursøk, rutedetaljer, populære turer, kommuner og OSM-data i kartutsnittet. Definerer `Query`.                       |
+| `graphql/auth.ts`              | Registrering, innlogging, utlogging og passord. Definerer `Mutation`.                                                |
+| `graphql/profile.ts`           | Profilen: favoritter, turstatus, dagbok, månedsmål og «Mitt sted».                                                   |
+| `graphql/builder.ts`           | Egne ruter, rundturforslag, høydeprofil og stopp langs turen. Krever innlogging.                                     |
+| `graphql/mountains.ts`         | GraphQL-typene og -spørringene for fjellområdesiden.                                                                 |
+| `graphql/types.ts`             | Argumenttypen alle resolverne deler.                                                                                 |
+| `lib/auth.ts`                  | Passordhasjing, sesjoner og `authed()`, som pakker resolvere som krever innlogging.                                  |
+| `lib/authLimits.ts`            | Begrenser antall innloggingsforsøk.                                                                                  |
+| `lib/requestSafety.ts`         | Grenser for størrelse og dybde på spørringer.                                                                        |
+| `lib/validation.ts`            | Delte kontroller av input: rute-id, passordlengde og kartutsnitt.                                                    |
+| `lib/passwordMail.ts`          | Sender e-post med lenke for tilbakestilling av passord.                                                              |
+| `services/mountainAreas.ts`    | Henter fjellområdene med nøkkeltall: antall hytter, buer, gapahuker og topper, og høyeste topp.                      |
+| `services/pointsOfInterest.ts` | Henter turpunktene i ett fjellområde, og søker etter turpunkter på navn.                                             |
+| `services/customRoutes.ts`     | Ruteplanlegging og rundturforslag langs registrerte stier.                                                           |
+| `services/elevation.ts`        | Høydeprofil fra Kartverket.                                                                                          |
+| `services/routeStops.ts`       | Hytter, vann og utsiktspunkter langs en rute (fra OSM).                                                              |
+| `db/db.ts`                     | Én felles tilkobling (`pg.Pool`) til databasen, og `withTransaction()` som kjører flere spørringer i én transaksjon. |
+| `db/appSchema.ts`              | Lager appens egne tabeller ved oppstart og sjekker at rutekatalogen finnes.                                          |
+| `sql/silver/*.sql`             | SQL-filene som lager de rensede dataene fjelldelen henter fra. Kjøres for hånd i DBeaver.                            |
+
+Backenden er skrevet i TypeScript. Node 24 kjører `.ts`-filene direkte, siden den fjerner typene ved oppstart, så backenden trenger ikke bygges.
 
 ### Kjøre lokalt
 
@@ -41,28 +55,44 @@ Uten `DATABASE_URL` prøver `db.ts` en lokal database via socket i `/tmp`. Tilko
 
 Databasen er delt i skjemaer etter det som kalles medallion-mønsteret. Originaldataene endres aldri.
 
-| Skjema | Innhold |
-|---|---|
-| `osm_import`, `turogfriluftsruter_…` (bronze) | Rådata slik de ble importert: OpenStreetMap-uttrekket og Kartverkets Tur- og friluftsruter. |
-| `silver` | Rensede data som fjelldelen henter fra: `osm_points_of_interest` og `mountain_areas`. |
-| `norwegian_explorer_app` | Appens egne tabeller: brukere, sesjoner, favoritter og rutekatalogen. `index.mjs` lager tabellene for brukere, sesjoner og favoritter ved oppstart. |
+| Skjema                                        | Innhold                                                                                                                                                   |
+| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `osm_import`, `turogfriluftsruter_…` (bronze) | Rådata slik de ble importert: OpenStreetMap-uttrekket og Kartverkets Tur- og friluftsruter.                                                               |
+| `silver`                                      | Rensede data som fjelldelen henter fra: `osm_points_of_interest` og `mountain_areas`.                                                                     |
+| `norwegian_explorer_app`                      | Appens egne tabeller: brukere, sesjoner, favoritter og rutekatalogen. `db/appSchema.ts` lager tabellene for brukere, sesjoner og favoritter ved oppstart. |
 
 Hvis databasebrukeren ikke har lov til å lage tabellene i `norwegian_explorer_app`, feiler bare innlogging og rutesøk. Resten av serveren, inkludert fjelldelen, virker som før.
 
 ## GraphQL-spørringer for fjelldelen
 
-| Spørring | Svar |
-|---|---|
-| `mountainAreas` | Alle fjellområdene med navn, beskrivelse, grense (GeoJSON), `bbox` (rektangelet rundt området) og antall hytter, buer, gapahuker og topper, pluss høyeste topp. |
-| `areaPointsOfInterest(areaId)` | Hyttene, buene, gapahukene og toppene i ett område, og dem som ligger opptil 10 km utenfor. Feltet `inside` sier om punktet er innenfor grensen. |
-| `searchPointsOfInterest(query)` | Opptil 12 hytter, buer, gapahuker og topper i fjellområdene med navn som inneholder søketeksten, sammen med området hvert treff ligger i. |
+| Spørring                        | Svar                                                                                                                                                            |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mountainAreas`                 | Alle fjellområdene med navn, beskrivelse, grense (GeoJSON), `bbox` (rektangelet rundt området) og antall hytter, buer, gapahuker og topper, pluss høyeste topp. |
+| `areaPointsOfInterest(areaId)`  | Hyttene, buene, gapahukene og toppene i ett område, og dem som ligger opptil 10 km utenfor. Feltet `inside` sier om punktet er innenfor grensen.                |
+| `searchPointsOfInterest(query)` | Opptil 12 hytter, buer, gapahuker og topper i fjellområdene med navn som inneholder søketeksten, sammen med området hvert treff ligger i.                       |
 
 Eksempel:
 
 ```graphql
 {
-  mountainAreas { id name hutCount peakCount highestPeak { name elevation } }
-  searchPointsOfInterest(query: "gjende") { areaId point { name kind capacity } }
+  mountainAreas {
+    id
+    name
+    hutCount
+    peakCount
+    highestPeak {
+      name
+      elevation
+    }
+  }
+  searchPointsOfInterest(query: "gjende") {
+    areaId
+    point {
+      name
+      kind
+      capacity
+    }
+  }
 }
 ```
 
@@ -74,12 +104,12 @@ Lages av `sql/silver/osm_points_of_interest.sql` fra OSM-dataene i `osm_import.o
 
 OSM-taggene oversettes til egne typer. Fjelldelen bruker de fire første:
 
-| Type | OSM-tagg | Betydning |
-|---|---|---|
-| `HUT` | `tourism=alpine_hut` | Turisthytte |
-| `CABIN` | `tourism=wilderness_hut`, eller `tourism=chalet` med `dnt:classification` | Bu eller koie |
-| `SHELTER` | `amenity=shelter` | Gapahuk eller rasteplass |
-| `PEAK` | `natural=peak` | Topp |
+| Type                                                   | OSM-tagg                                                                                                                  | Betydning                             |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `HUT`                                                  | `tourism=alpine_hut`                                                                                                      | Turisthytte                           |
+| `CABIN`                                                | `tourism=wilderness_hut`, eller `tourism=chalet` med `dnt:classification`                                                 | Bu eller koie                         |
+| `SHELTER`                                              | `amenity=shelter`                                                                                                         | Gapahuk eller rasteplass              |
+| `PEAK`                                                 | `natural=peak`                                                                                                            | Topp                                  |
 | `CAMPSITE`, `VIEWPOINT`, `PARKING`, `TOILETS`, `WATER` | `tourism=camp_site`, `tourism=viewpoint`, `amenity=parking` med `hiking=yes`, `amenity=toilets`, `amenity=drinking_water` | Brukes ikke på fjellområdesiden i dag |
 
 Private steder, busskur, vanlig parkering og utleiehytter er filtrert bort. Høyde (`ele`) og sengeplasser (`capacity`) er tekst i OSM og gjøres om til tall. Tall som er åpenbart feil, som høyder over Galdhøpiggens 2469 moh., blir `NULL`.
@@ -94,34 +124,34 @@ REFRESH MATERIALIZED VIEW silver.osm_points_of_interest;
 
 Tabellen lages av `sql/silver/mountain_areas.sql`, og fila er kilden til dataene. Vil du endre noe, endrer du fila og kjører hele fila på nytt i DBeaver med Option+X. Ikke rediger tabellen direkte.
 
-| Kolonne | Innhold |
-|---|---|
-| `id` | Brukes i adressen, for eksempel `jotunheimen` i `fjellomrade.html#/jotunheimen` |
-| `name`, `description` | Navn og kort beskrivelse |
-| `ssr_id` | Kartverkets stedsnummer i stedsnavnregisteret (SSR), eller `NULL` hvis Kartverket ikke har området |
-| `area` | Grensen, som `geometry(MultiPolygon, 4326)`. Det er en MultiPolygon fordi noen grenser består av flere deler. |
+| Kolonne               | Innhold                                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | Brukes i adressen, for eksempel `jotunheimen` i `fjellomrade.html#/jotunheimen`                               |
+| `name`, `description` | Navn og kort beskrivelse                                                                                      |
+| `ssr_id`              | Kartverkets stedsnummer i stedsnavnregisteret (SSR), eller `NULL` hvis Kartverket ikke har området            |
+| `area`                | Grensen, som `geometry(MultiPolygon, 4326)`. Det er en MultiPolygon fordi noen grenser består av flere deler. |
 
 ### Hvor grensene kommer fra
 
 Det finnes ingen offisiell avgrensning av landskapsområder som «Jotunheimen». Hvert område har derfor fått grensen fra den kilden som passer best:
 
-| Område | Kilde | Grense | Areal* |
-|---|---|---|---|
-| Jotunheimen | OpenStreetMap | `natural=mountain_range`, relasjon 8512564 | 1 830 km² |
-| Rondane | OpenStreetMap | `natural=mountain_range`, relasjon 8512563 | 1 496 km² |
-| Hardangervidda | OpenStreetMap | `natural=mountain_range`, relasjon 8512565 | 4 381 km² |
-| Dovrefjell | OpenStreetMap | `natural=mountain_range`, relasjon 8512562 | 4 550 km² |
-| Trollheimen | Miljødirektoratet | Trollheimen landskapsvernområde (VV00000745) | 1 914 km² |
-| Breheimen | Miljødirektoratet | Breheimen nasjonalpark (VV00002830) | 2 668 km² |
-| Femundsmarka | Miljødirektoratet | Femundsmarka nasjonalpark (VV00001943) | 1 025 km² |
-| Blåfjella–Skjækerfjella | Miljødirektoratet | Blåfjella-Skjækerfjella nasjonalpark (VV00001562) | 3 109 km² |
-| Saltfjellet | Miljødirektoratet | Saltfjellet-Svartisen nasjonalpark (VV00000235) | 3 013 km² |
-| Lyngsalpan | Miljødirektoratet | Lyngsalpan landskapsvernområde (VV00002271) | 1 661 km² |
-| Setesdalsheiane | Miljødirektoratet | Setesdal Vesthei Ryfylkeheiane landskapsvernområde (VV00001937) | 3 732 km² |
-| Romsdalsalpane | Håndlaget rektangel | 7,4–8,1 °Ø, 62,35–62,65 °N | 1 206 km² |
-| Sunnmørsalpane | Håndlaget rektangel | 6,2–7,1 °Ø, 62,0–62,4 °N | 2 088 km² |
-| Skarvheimen | Håndlaget rektangel | 7,5–8,4 °Ø, 60,6–61,0 °N | 2 184 km² |
-| Lofoten | Håndlaget rektangel | 12,8–15,5 °Ø, 67,85–68,45 °N | 7 506 km² |
+| Område                  | Kilde               | Grense                                                          | Areal*    |
+| ----------------------- | ------------------- | --------------------------------------------------------------- | --------- |
+| Jotunheimen             | OpenStreetMap       | `natural=mountain_range`, relasjon 8512564                      | 1 830 km² |
+| Rondane                 | OpenStreetMap       | `natural=mountain_range`, relasjon 8512563                      | 1 496 km² |
+| Hardangervidda          | OpenStreetMap       | `natural=mountain_range`, relasjon 8512565                      | 4 381 km² |
+| Dovrefjell              | OpenStreetMap       | `natural=mountain_range`, relasjon 8512562                      | 4 550 km² |
+| Trollheimen             | Miljødirektoratet   | Trollheimen landskapsvernområde (VV00000745)                    | 1 914 km² |
+| Breheimen               | Miljødirektoratet   | Breheimen nasjonalpark (VV00002830)                             | 2 668 km² |
+| Femundsmarka            | Miljødirektoratet   | Femundsmarka nasjonalpark (VV00001943)                          | 1 025 km² |
+| Blåfjella–Skjækerfjella | Miljødirektoratet   | Blåfjella-Skjækerfjella nasjonalpark (VV00001562)               | 3 109 km² |
+| Saltfjellet             | Miljødirektoratet   | Saltfjellet-Svartisen nasjonalpark (VV00000235)                 | 3 013 km² |
+| Lyngsalpan              | Miljødirektoratet   | Lyngsalpan landskapsvernområde (VV00002271)                     | 1 661 km² |
+| Setesdalsheiane         | Miljødirektoratet   | Setesdal Vesthei Ryfylkeheiane landskapsvernområde (VV00001937) | 3 732 km² |
+| Romsdalsalpane          | Håndlaget rektangel | 7,4–8,1 °Ø, 62,35–62,65 °N                                      | 1 206 km² |
+| Sunnmørsalpane          | Håndlaget rektangel | 6,2–7,1 °Ø, 62,0–62,4 °N                                        | 2 088 km² |
+| Skarvheimen             | Håndlaget rektangel | 7,5–8,4 °Ø, 60,6–61,0 °N                                        | 2 184 km² |
+| Lofoten                 | Håndlaget rektangel | 12,8–15,5 °Ø, 67,85–68,45 °N                                    | 7 506 km² |
 
 \* Arealet slik det ligger i tabellen, altså med 3 km utvidelse for grensene fra OSM og Miljødirektoratet.
 
@@ -142,11 +172,11 @@ Andre kilder som ble vurdert:
 - **Forenklet:** Grensene fra OSM og Miljødirektoratet er forenklet til omtrent 100 m nøyaktighet med `ogr2ogr -simplify 0.001`, og koordinatene er rundet av til 5 desimaler. Det holder godt for et oversiktskart, og hele SQL-fila blir på rundt 65 kB.
 - **Utvidet med 3 km:** Mange DNT-hytter ligger rett utenfor verne- og fjellgrensene, nede i dalen eller ved veien inn. Gjendesheim og Spiterstulen er eksempler. Derfor utvider SQL-fila disse grensene med 3 km med `ST_Buffer(area::geography, 3000)`, der `geography` gjør at avstanden regnes i meter. 3 km ble valgt etter å ha sammenlignet antall hytter:
 
-  | | Gammelt rektangel | Grensen | + 2 km | + 3 km | + 5 km |
-  |---|---|---|---|---|---|
-  | Jotunheimen | 19 | 4 | 12 | 16 | 17 |
-  | Rondane | 7 | 1 | 11 | 11 | 11 |
-  | Hardangervidda | 26 | 9 | 12 | 15 | 18 |
+  |                | Gammelt rektangel | Grensen | + 2 km | + 3 km | + 5 km |
+  | -------------- | ----------------- | ------- | ------ | ------ | ------ |
+  | Jotunheimen    | 19                | 4       | 12     | 16     | 17     |
+  | Rondane        | 7                 | 1       | 11     | 11     | 11     |
+  | Hardangervidda | 26                | 9       | 12     | 15     | 18     |
 
   Hardangervidda har færre hytter enn før fordi det gamle rektangelet gikk langt utenfor selve vidda.
 
@@ -154,9 +184,9 @@ Andre kilder som ble vurdert:
 
 All romlig logikk bruker samme grense med `ST_Intersects`, så tallene, lista og kartet stemmer overens:
 
-- **Opptelling** (`mountainAreas.ts`): For hvert område telles hytter, buer, gapahuker og topper innenfor grensen, og høyeste topp med navn og høyde finnes. Svaret huskes i 10 minutter, siden tallene bare endres når SQL-filene kjøres på nytt. Start backenden på nytt for å se endringer med en gang.
-- **Turpunkter for ett område** (`pointsOfInterest.ts`): Henter punktene opptil 10 km utenfor grensen, så kartet også viser hva som ligger like ved. `&&` mot `ST_Expand(area, 0.3)` finner kandidatene raskt med den romlige indeksen, og `ST_DWithin` på `geography` sjekker de 10 km i meter. `inside` er true for punktene innenfor grensen, og det er bare de som telles og vises i lista i panelet. Spørringen tar rundt 90 ms for Jotunheimen.
-- **Søk** (`pointsOfInterest.ts`): `ILIKE` mot navnet, bare for punkter innenfor et fjellområde, siden det er de siden kan åpne et kart for. Navn som starter med søketeksten kommer først, deretter hytter før buer, gapahuker og topper. `%` og `_` escapes, så de søkes etter som vanlige tegn.
+- **Opptelling** (`services/mountainAreas.ts`): For hvert område telles hytter, buer, gapahuker og topper innenfor grensen, og høyeste topp med navn og høyde finnes. Svaret huskes i 10 minutter, siden tallene bare endres når SQL-filene kjøres på nytt. Start backenden på nytt for å se endringer med en gang.
+- **Turpunkter for ett område** (`services/pointsOfInterest.ts`): Henter punktene opptil 10 km utenfor grensen, så kartet også viser hva som ligger like ved. `&&` mot `ST_Expand(area, 0.3)` finner kandidatene raskt med den romlige indeksen, og `ST_DWithin` på `geography` sjekker de 10 km i meter. `inside` er true for punktene innenfor grensen, og det er bare de som telles og vises i lista i panelet. Spørringen tar rundt 90 ms for Jotunheimen.
+- **Søk** (`services/pointsOfInterest.ts`): `ILIKE` mot navnet, bare for punkter innenfor et fjellområde, siden det er de siden kan åpne et kart for. Navn som starter med søketeksten kommer først, deretter hytter før buer, gapahuker og topper. `%` og `_` escapes, så de søkes etter som vanlige tegn.
 
 ## Lisenser
 
diff --git a/server/authLimits.ts b/server/authLimits.ts
deleted file mode 100644
index 0ed84d8..0000000
--- a/server/authLimits.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {GraphQLError} from 'graphql'
-// In-memory guard for this single-process prototype; do not trust forwarded IP headers.
-const attempts=new Map<string,{start:number;count:number}>()
-let globalWindow={start:0,count:0}
-export function checkAuthAttempt(username:string,now=Date.now()){
-  if(now-globalWindow.start>=60000)globalWindow={start:now,count:0}
-  if(++globalWindow.count>120)throw new GraphQLError('For mange innloggingsforsøk. Vent ett minutt og prøv igjen.')
-  for(const [key,value] of attempts)if(now-value.start>=900000)attempts.delete(key)
-  const key=username.trim().toLowerCase().slice(0,100)
-  const value=attempts.get(key)||{start:now,count:0}
-  attempts.set(key,value)
-  if(++value.count>20)throw new GraphQLError('For mange forsøk for dette brukernavnet. Vent 15 minutter og prøv igjen.')
-}
diff --git a/server/customRoutes.ts b/server/customRoutes.ts
deleted file mode 100644
index e2bd021..0000000
--- a/server/customRoutes.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { GraphQLError } from 'graphql'
-import { pool } from './db.ts'
-
-export type BuilderPoint={lon:number;lat:number}
-type NetworkNode={id:string;xy:number[];ll:number[];neighbors:Map<string,number>}
-type LineRow={projected:{coordinates:number[][]};geographic:{coordinates:number[][]}}
-type RingRow=LineRow & {id:string;length:number}
-type Network={nodes:Map<string,NetworkNode>;sourceRouteId:string;sourceName:string;geojson:string;cycles?:Promise<RingRow[]>}
-const networks = new Map<string,Promise<Network>>()
-export function builderNetwork(routeId:string|null = null) {
-  if (routeId && !/^[a-f0-9]{32}$/.test(routeId)) throw new GraphQLError('Ugyldig kilderute.')
-  const key = routeId || 'Bymarka'
-  if (!networks.has(key)) {
-    if (networks.size >= 4) networks.delete(networks.keys().next().value!)
-    networks.set(key,loadNetwork(routeId).catch(error => {networks.delete(key);throw error}))
-  }
-  return networks.get(key)!
-}
-async function loadNetwork(routeId:string|null):Promise<Network> {
-  const { rows: sources } = await pool.query(`SELECT id,name FROM norwegian_explorer_app.route_catalog
-    WHERE (($1::text IS NOT NULL AND id=$1) OR ($1::text IS NULL AND name='Bymarka'))
-    AND NOT EXISTS(SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=route_catalog.id)
-    UNION ALL SELECT id,name FROM norwegian_explorer_app.route_loops WHERE id=$1`,[routeId])
-  if (!sources.length) throw new GraphQLError('Kilderuten finnes ikke lenger. Velg en annen rute.')
-  const source = sources[0]
-  const { rows } = await pool.query<LineRow>(`WITH network AS (
-    SELECT ST_Node(ST_UnaryUnion(ST_Collect(geom))) AS geom
-    FROM (SELECT geom FROM norwegian_explorer_app.route_catalog WHERE id=$1
-      UNION ALL SELECT geom FROM norwegian_explorer_app.route_loops WHERE id=$1) source
-  ), lines AS (
-    SELECT (ST_Dump(ST_Segmentize(geom,30))).geom AS geom FROM network
-  ) SELECT ST_AsGeoJSON(geom)::json AS projected,
-    ST_AsGeoJSON(ST_Transform(geom,4326))::json AS geographic FROM lines`,[source.id])
-  if (!rows.length) throw new GraphQLError('Denne ruten har ikke et tilgjengelig stinett.')
-  const pointCount=rows.reduce((total,row)=>total+row.projected.coordinates.length,0)
-  if(pointCount>250000)throw new GraphQLError('Stinettet er for stort for rutebyggeren. Velg en mindre rutevariant.')
-  const nodes = new Map<string,NetworkNode>()
-  const key = (point:number[]) => point.map(n => n.toFixed(6)).join(',')
-  for (const row of rows) {
-    const xy = row.projected.coordinates
-    const ll = row.geographic.coordinates
-    for (let i=0;i<xy.length;i++) {
-      const id = key(xy[i])
-      if (!nodes.has(id)) nodes.set(id, { id, xy: xy[i], ll: ll[i], neighbors: new Map() })
-      if (i) {
-        const a = nodes.get(key(xy[i-1]))!, b = nodes.get(id)!
-        const distance = Math.hypot(a.xy[0]-b.xy[0],a.xy[1]-b.xy[1])
-        a.neighbors.set(b.id,distance); b.neighbors.set(a.id,distance)
-      }
-    }
-  }
-  return { nodes, sourceRouteId:source.id, sourceName:source.name,
-    geojson: JSON.stringify({ type:'MultiLineString',coordinates:rows.map(row => row.geographic.coordinates) }) }
-}
-
-function shortestPath(nodes:Map<string,NetworkNode>, start:string, end:string) {
-  const distances = new Map([[start,0]]), previous = new Map(), visited = new Set()
-  const queue:[number,string][] = [[0,start]]
-  function push(entry:[number,string]) {
-    queue.push(entry)
-    let i=queue.length-1
-    while(i>0){const parent=Math.floor((i-1)/2);if(queue[parent][0]<=entry[0])break;queue[i]=queue[parent];i=parent}
-    queue[i]=entry
-  }
-  function pop() {
-    const result=queue[0],last=queue.pop()!
-    if(queue.length){let i=0;queue[0]=last;while(true){let child=i*2+1;if(child>=queue.length)break;if(child+1<queue.length&&queue[child+1][0]<queue[child][0])child++;if(queue[child][0]>=last[0])break;queue[i]=queue[child];i=child}queue[i]=last}
-    return result
-  }
-  while (queue.length) {
-    const [distance,id] = pop()
-    if (visited.has(id)) continue
-    visited.add(id)
-    if (id === end) {
-      const path = [id]
-      while (path[path.length-1] !== start) path.push(previous.get(path[path.length-1]))
-      path.reverse()
-      return { path, distance }
-    }
-    for (const [neighbor,cost] of nodes.get(id)!.neighbors) {
-      const next = distance+cost
-      if (next < (distances.get(neighbor) ?? Infinity)) { distances.set(neighbor,next); previous.set(neighbor,id); push([next,neighbor]) }
-    }
-  }
-  throw new GraphQLError('Punktene ligger på adskilte deler av stinettet. Flytt et punkt til en sti som er koblet til de andre.')
-}
-
-export async function planCustomRoute(points:BuilderPoint[], routeId:string|null = null) {
-  if (!Array.isArray(points) || points.length<2 || points.length>12 || points.some(p => !p || !Number.isFinite(p.lon) || !Number.isFinite(p.lat) || p.lon<-180 || p.lon>180 || p.lat<-90 || p.lat>90)) throw new GraphQLError('Velg 2–12 gyldige punkter på den valgte ruten.')
-  const network = await builderNetwork(routeId)
-  const { rows } = await pool.query(`SELECT ST_X(p) AS x,ST_Y(p) AS y FROM (
-    SELECT ST_Transform(ST_SetSRID(ST_MakePoint((v->>'lon')::float8,(v->>'lat')::float8),4326),25833) AS p
-    FROM jsonb_array_elements($1::jsonb) WITH ORDINALITY AS input(v,n) ORDER BY n
-  ) transformed`, [JSON.stringify(points)])
-  const snapped = rows.map(point => {
-    let best:NetworkNode|undefined, distance = Infinity
-    for (const node of network.nodes.values()) {
-      const d = Math.hypot(node.xy[0]-point.x,node.xy[1]-point.y)
-      if (d<distance) { best=node; distance=d }
-    }
-    if (!best || distance>120) throw new GraphQLError('Et punkt er mer enn 120 meter fra de registrerte stiene. Flytt det nærmere en sti.')
-    return best
-  })
-  let lengthMeters=0
-  const coordinates=[]
-  for (let i=1;i<snapped.length;i++) {
-    const leg = shortestPath(network.nodes,snapped[i-1].id,snapped[i].id)
-    lengthMeters+=leg.distance
-    for (const id of leg.path.slice(i===1?0:1)) coordinates.push(network.nodes.get(id)!.ll)
-  }
-  if (lengthMeters<50) throw new GraphQLError('Velg punkter som gir en rute på minst 50 meter.')
-  return { sourceRouteId:network.sourceRouteId,sourceName:network.sourceName,geojson:JSON.stringify({type:'LineString',coordinates}),lengthMeters,
-    waypoints:snapped.map(node => ({lon:node.ll[0],lat:node.ll[1]})) }
-}
-
-export async function suggestRoundTrips(start:BuilderPoint, desiredLengthMeters:number, routeId:string|null = null) {
-  if (!start || !Number.isFinite(start.lon) || !Number.isFinite(start.lat) || Math.abs(start.lon)>180 || Math.abs(start.lat)>90 || !Number.isFinite(desiredLengthMeters) || desiredLengthMeters<500 || desiredLengthMeters>50000) throw new GraphQLError('Velg et gyldig startpunkt og en lengde mellom 0,5 og 50 km.')
-  const network=await builderNetwork(routeId)
-  const {rows:[position]}=await pool.query('SELECT ST_X(p) AS x,ST_Y(p) AS y FROM (SELECT ST_Transform(ST_SetSRID(ST_MakePoint($1,$2),4326),25833) p) point',[start.lon,start.lat])
-  let startNode:NetworkNode|undefined,distance=Infinity
-  for(const node of network.nodes.values()){const d=Math.hypot(node.xy[0]-position.x,node.xy[1]-position.y);if(d<distance){distance=d;startNode=node}}
-  if(!startNode||distance>120)throw new GraphQLError('Startpunktet må være innen 120 meter fra det valgte stinettet.')
-  if(!network.cycles) network.cycles=pool.query<RingRow>(`WITH source AS (
-    SELECT geom FROM norwegian_explorer_app.route_catalog WHERE id=$1
-    UNION ALL SELECT geom FROM norwegian_explorer_app.route_loops WHERE id=$1
-  ), network AS (SELECT ST_Node(ST_UnaryUnion(ST_Collect(geom))) geom FROM source),
-  polygons AS (SELECT (ST_Dump(ST_CollectionExtract(ST_Polygonize(ARRAY[geom]),3))).geom geom FROM network),
-  rings AS (SELECT ST_ExteriorRing(geom) geom FROM polygons)
-  SELECT md5(ST_AsEWKB(ST_Normalize(geom))::text) id,ST_AsGeoJSON(geom)::json projected,
-    ST_AsGeoJSON(ST_Transform(geom,4326))::json geographic,ST_Length(geom) length
-  FROM rings WHERE ST_Length(geom) BETWEEN 200 AND 50000`,[network.sourceRouteId]).then(result=>result.rows).catch(error=>{network.cycles=undefined;throw error})
-  const rings=await network.cycles
-  const candidates=[]
-  for(const ring of rings){
-    let anchorIndex=0,near=Infinity
-    const xy=ring.projected.coordinates.slice(0,-1)
-    const ll=ring.geographic.coordinates.slice(0,-1)
-    let directLoop=null
-    for(let i=0;i<xy.length;i++){
-      const a=xy[i],b=xy[(i+1)%xy.length],dx=b[0]-a[0],dy=b[1]-a[1]
-      const t=((startNode.xy[0]-a[0])*dx+(startNode.xy[1]-a[1])*dy)/(dx*dx+dy*dy)
-      if(t>=0&&t<=1&&Math.hypot(a[0]+t*dx-startNode.xy[0],a[1]+t*dy-startNode.xy[1])<0.0001){directLoop=[startNode.ll,...ll.slice(i+1),...ll.slice(0,i+1),startNode.ll];break}
-    }
-    for(let i=0;i<xy.length;i++){const d=Math.hypot(xy[i][0]-startNode.xy[0],xy[i][1]-startNode.xy[1]);if(d<near){near=d;anchorIndex=i}}
-    const anchor=directLoop?startNode:network.nodes.get(xy[anchorIndex].map(n=>n.toFixed(6)).join(','))
-    if(anchor)candidates.push({ring,anchor,anchorIndex,directLoop,score:Math.abs(ring.length+2*(directLoop?0:near)-desiredLengthMeters)})
-  }
-  const proposals=[]
-  for(const {ring,anchor,anchorIndex,directLoop} of candidates.sort((a,b)=>a.score-b.score).slice(0,40)){
-    let connector
-    try{connector=shortestPath(network.nodes,startNode.id,anchor.id)}catch{continue}
-    const lengthMeters=ring.length+2*connector.distance
-    if(Math.abs(lengthMeters-desiredLengthMeters)>Math.max(300,desiredLengthMeters*0.4))continue
-    const access=connector.path.map(id=>network.nodes.get(id)!.ll)
-    const ringCoords=ring.geographic.coordinates.slice(0,-1)
-    const loop=directLoop || [...ringCoords.slice(anchorIndex),...ringCoords.slice(0,anchorIndex),ringCoords[anchorIndex]]
-    const coordinates=[]
-    for(const point of access)coordinates.push(point)
-    for(const point of loop.slice(1))coordinates.push(point)
-    for(const point of access.slice(0,-1).reverse())coordinates.push(point)
-    const [lon,lat]=startNode.ll
-    proposals.push({id:ring.id,sourceRouteId:network.sourceRouteId,sourceName:network.sourceName,
-      geojson:JSON.stringify({type:'LineString',coordinates}),lengthMeters,connectorMeters:2*connector.distance,
-      differenceMeters:lengthMeters-desiredLengthMeters,waypoints:[{lon,lat},{lon,lat}]})
-  }
-  return proposals.sort((a,b)=>Math.abs(a.differenceMeters)-Math.abs(b.differenceMeters)||a.connectorMeters-b.connectorMeters).slice(0,3)
-}
diff --git a/server/db.ts b/server/db.ts
deleted file mode 100644
index 69c5681..0000000
--- a/server/db.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Felles tilkobling til PostgreSQL-databasen, brukt av hele backenden (index.ts og modulene i server/).
-// Med DATABASE_URL i .env kobler vi til den (se .env.example). Uten den brukes PG-variablene,
-// eller en lokal database via socket i /tmp.
-import { userInfo } from 'node:os'
-import pg from 'pg'
-
-if (!process.env.DATABASE_URL) console.warn('DATABASE_URL er ikke satt i .env, så backend kobler til en lokal database.')
-
-export const pool = new pg.Pool({
-  ...(process.env.DATABASE_URL ? { connectionString: process.env.DATABASE_URL } : {
-    host: process.env.PGHOST || '/tmp',
-    user: process.env.PGUSER || userInfo().username,
-    database: process.env.PGDATABASE || 'norwegian_explorer',
-  }),
-  max: 4,
-  connectionTimeoutMillis: 5000,
-  statement_timeout: 10000,
-})
-
-pool.on('error', (error) => console.error('Feil i databasetilkoblingen:', error.message))
diff --git a/server/db/appSchema.ts b/server/db/appSchema.ts
new file mode 100644
index 0000000..82f0839
--- /dev/null
+++ b/server/db/appSchema.ts
@@ -0,0 +1,111 @@
+// Oppsett av appens egne tabeller (brukere, sesjoner, favoritter, egne ruter) og sjekk av at
+// rutekatalogen finnes. Hvert «Ready»-løfte venter andre moduler på før de spør databasen.
+import { pool } from './db.ts'
+
+const appSchemaSetup = pool.query(`
+  CREATE SCHEMA IF NOT EXISTS norwegian_explorer_app;
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.users (
+    id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+    username text NOT NULL UNIQUE,
+    password_hash bytea NOT NULL,
+    password_salt bytea NOT NULL,
+    created_at timestamptz NOT NULL DEFAULT now()
+  );
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.password_resets (
+    token_hash bytea PRIMARY KEY,
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    expires_at timestamptz NOT NULL
+  );
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.sessions (
+    token_hash bytea PRIMARY KEY,
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    expires_at timestamptz NOT NULL
+  );
+  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS email text;
+  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS phone text;
+  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS avatar text;
+  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS home_municipality text;
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.favorites (
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    route_name text NOT NULL,
+    route_number text NOT NULL,
+    created_at timestamptz NOT NULL DEFAULT now(),
+    PRIMARY KEY (user_id, route_name, route_number)
+  );
+  ALTER TABLE norwegian_explorer_app.favorites ADD COLUMN IF NOT EXISTS route_id text;
+  CREATE UNIQUE INDEX IF NOT EXISTS favorites_user_route_id_idx
+    ON norwegian_explorer_app.favorites (user_id, route_id) WHERE route_id IS NOT NULL;
+  CREATE UNIQUE INDEX IF NOT EXISTS users_username_lower_idx ON norwegian_explorer_app.users (lower(username));
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.user_routes (
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    route_id text NOT NULL,
+    route_name text NOT NULL,
+    route_number text NOT NULL,
+    status text NOT NULL CHECK (status IN ('PLANNED','COMPLETED')),
+    updated_at timestamptz NOT NULL DEFAULT now(),
+    PRIMARY KEY (user_id,route_id)
+  );
+  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS completed_on date;
+  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS diary_note text;
+  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS rating integer CHECK (rating BETWEEN 1 AND 5);
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.user_goals (
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    month text NOT NULL CHECK (month ~ '^[0-9]{4}-(0[1-9]|1[0-2])$'),
+    target integer NOT NULL CHECK (target BETWEEN 1 AND 1000),
+    PRIMARY KEY (user_id,month)
+  );
+  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.custom_routes (
+    id text PRIMARY KEY,
+    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
+    name text NOT NULL,
+    description text NOT NULL DEFAULT '',
+    waypoints jsonb NOT NULL,
+    geojson text NOT NULL,
+    length_meters double precision NOT NULL,
+    updated_at timestamptz NOT NULL DEFAULT now()
+  );
+  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS source_route_id text;
+  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS source_name text NOT NULL DEFAULT 'Bymarka';
+  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS smart_plan jsonb;
+  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS stops jsonb NOT NULL DEFAULT '[]'::jsonb;
+`)
+export const appSchemaReady = appSchemaSetup.catch(async (error) => {
+  console.error('Kunne ikke klargjøre appens tabeller:', error.message)
+  const { rows } = await pool.query("SELECT to_regclass('norwegian_explorer_app.users') AS users")
+  if (!rows[0].users) throw error
+  const required = ['sessions', 'favorites', 'user_routes', 'user_goals', 'custom_routes']
+  const result = await pool.query<{ ready: boolean }>(
+    "SELECT bool_and(to_regclass('norwegian_explorer_app.' || name) IS NOT NULL) AS ready FROM unnest($1::text[]) name",
+    [required],
+  )
+  if (!result.rows[0].ready) throw error
+  console.error('Tabellene finnes allerede, så backend fortsetter med dem som de er.')
+})
+// Kolonnen for «Mitt sted» kan mangle hvis den ikke er lagt til av eieren av tabellen ennå
+// (se server/sql/app/home_municipality.sql). Da virker alt annet, men stedsvalget er slått av.
+export const hasHomeMunicipality = appSchemaReady.then(async () => {
+  const { rowCount } = await pool.query(`SELECT 1 FROM information_schema.columns
+    WHERE table_schema='norwegian_explorer_app' AND table_name='users' AND column_name='home_municipality'`)
+  if (!rowCount)
+    console.error(
+      'Kolonnen users.home_municipality mangler. Kjør server/sql/app/home_municipality.sql for å slå på stedsvalg.',
+    )
+  return (rowCount || 0) > 0
+})
+/** Kolonneuttrykket for brukerens sted, eller NULL hvis kolonnen ikke finnes i databasen */
+export async function homeColumn(prefix: string = '') {
+  return (await hasHomeMunicipality) ? `${prefix}home_municipality` : 'NULL AS home_municipality'
+}
+export const routeCatalogReady = appSchemaReady.then(async () => {
+  const { rows } = await pool.query(
+    "SELECT to_regclass('norwegian_explorer_app.route_catalog') AS catalog",
+  )
+  if (!rows[0].catalog)
+    throw new Error('Route catalog is missing. Run scripts/create-route-catalog.sql first.')
+})
+// Får ikke databasebrukeren lage tabellene over, skal bare innlogging og ruter feile, ikke hele serveren
+appSchemaReady.catch((error) =>
+  console.error('Kunne ikke klargjøre appens tabeller:', error.message),
+)
+routeCatalogReady.catch((error) => console.error(error.message))
+hasHomeMunicipality.catch(() => undefined)
diff --git a/server/db/db.ts b/server/db/db.ts
new file mode 100644
index 0000000..dc2e199
--- /dev/null
+++ b/server/db/db.ts
@@ -0,0 +1,42 @@
+// Felles tilkobling til PostgreSQL-databasen, brukt av hele backenden (index.ts og modulene i server/).
+// Med DATABASE_URL i .env kobler vi til den (se .env.example). Uten den brukes PG-variablene,
+// eller en lokal database via socket i /tmp.
+import { userInfo } from 'node:os'
+import pg, { type PoolClient } from 'pg'
+
+if (!process.env.DATABASE_URL)
+  console.warn('DATABASE_URL er ikke satt i .env, så backend kobler til en lokal database.')
+
+export const pool = new pg.Pool({
+  ...(process.env.DATABASE_URL
+    ? { connectionString: process.env.DATABASE_URL }
+    : {
+        host: process.env.PGHOST || '/tmp',
+        user: process.env.PGUSER || userInfo().username,
+        database: process.env.PGDATABASE || 'norwegian_explorer',
+      }),
+  max: 4,
+  connectionTimeoutMillis: 5000,
+  statement_timeout: 10000,
+})
+
+pool.on('error', (error) => console.error('Feil i databasetilkoblingen:', error.message))
+
+/**
+ * Kjører `work` i én transaksjon. Går det bra, committes den. Kaster `work`, rulles alt tilbake,
+ * og tilkoblingen gis alltid tilbake til poolen.
+ */
+export async function withTransaction<T>(work: (client: PoolClient) => Promise<T>): Promise<T> {
+  const client = await pool.connect()
+  try {
+    await client.query('BEGIN')
+    const result = await work(client)
+    await client.query('COMMIT')
+    return result
+  } catch (error) {
+    await client.query('ROLLBACK')
+    throw error
+  } finally {
+    client.release()
+  }
+}
diff --git a/server/elevation.ts b/server/elevation.ts
deleted file mode 100644
index 8712fd3..0000000
--- a/server/elevation.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {createHash} from 'node:crypto'
-import {GraphQLError} from 'graphql'
-
-type SamplePoint={distanceMeters:number;lon:number;lat:number}
-type Sample={points:SamplePoint[];lengthMeters:number;sampleIntervalMeters:number}
-type HeightResponse={koordsys:number;punkter:{x:number;y:number;z:number|null}[]}
-const cache=new Map<string,{expires:number;value:ReturnType<typeof summarizeElevation>}>()
-const endpoint='https://ws.geonorge.no/hoydedata/v1/punkt'
-function distance(a:number[],b:number[]){const rad=Math.PI/180;const dlat=(b[1]-a[1])*rad,dlon=(b[0]-a[0])*rad;const h=Math.sin(dlat/2)**2+Math.cos(a[1]*rad)*Math.cos(b[1]*rad)*Math.sin(dlon/2)**2;return 6371000*2*Math.atan2(Math.sqrt(h),Math.sqrt(Math.max(0,1-h)))}
-
-export function sampleRoute(geojson:string):Sample {
-  if(typeof geojson!=='string'||geojson.length>5000000)throw new GraphQLError('Kartlinjen er for stor for høydeprofil.')
-  let geometry:{type?:string;coordinates?:number[][]}|null
-  try{geometry=JSON.parse(geojson)}catch{throw new GraphQLError('Ugyldig kartlinje.')}
-  if(!geometry || geometry.type!=='LineString'||!Array.isArray(geometry.coordinates)||geometry.coordinates.length<2||geometry.coordinates.length>100000)throw new GraphQLError('Høydeprofil krever én sammenhengende rute.')
-  const coordinates=geometry.coordinates!
-  if(coordinates.some(p=>!Array.isArray(p)||!Number.isFinite(p[0])||!Number.isFinite(p[1])||Math.abs(p[0])>180||Math.abs(p[1])>90))throw new GraphQLError('Ruten har ugyldige koordinater.')
-  const cumulative=[0]
-  for(let i=1;i<coordinates.length;i++)cumulative.push(cumulative[i-1]+distance(coordinates[i-1],coordinates[i]))
-  const length=cumulative.at(-1)!
-  if(length<1)throw new GraphQLError('Ruten er for kort for en høydeprofil.')
-  const count=Math.min(200,Math.max(2,Math.ceil(length/50)+1)),points=[]
-  let segment=1
-  for(let i=0;i<count;i++){
-    const meters=i*length/(count-1)
-    while(segment<cumulative.length-1&&cumulative[segment]<meters)segment++
-    const a=coordinates[segment-1],b=coordinates[segment],span=cumulative[segment]-cumulative[segment-1]
-    const ratio=span?(meters-cumulative[segment-1])/span:0
-    points.push({distanceMeters:meters,lon:a[0]+(b[0]-a[0])*ratio,lat:a[1]+(b[1]-a[1])*ratio})
-  }
-  return {points,lengthMeters:length,sampleIntervalMeters:length/(count-1)}
-}
-
-export function summarizeElevation(sample:Sample,heights:(number|null)[]) {
-  const points=sample.points.map((point,i)=>({...point,elevation:Number.isFinite(heights[i])?heights[i]:null}))
-  const valid=points.filter((p):p is (typeof points)[number]&{elevation:number}=>p.elevation!=null),complete=valid.length===points.length
-  let ascent=0,descent=0
-  if(complete)for(let i=1;i<points.length;i++){const delta=points[i].elevation!-points[i-1].elevation!;ascent+=Math.max(0,delta);descent+=Math.max(0,-delta)}
-  return {...sample,points,ascentMeters:complete?ascent:null,descentMeters:complete?descent:null,
-    minElevation:valid.length?Math.min(...valid.map(p=>p.elevation)):null,
-    maxElevation:valid.length?Math.max(...valid.map(p=>p.elevation)):null,
-    complete,missingCount:points.length-valid.length,source:'Kartverkets høydedata-API'}
-}
-
-export async function elevationProfile(geojson:string,fetcher:typeof fetch=fetch) {
-  const sample=sampleRoute(geojson)
-  const key=createHash('sha256').update(JSON.stringify(sample.points)).digest('hex')
-  const existing=cache.get(key)
-  if(existing&&existing.expires>Date.now())return existing.value
-  const heights=new Array(sample.points.length).fill(null)
-  const signal=AbortSignal.timeout(20000)
-  const batches:number[]=[]
-  for(let i=0;i<sample.points.length;i+=50)batches.push(i)
-  let next=0
-  async function worker(){
-    while(next<batches.length){
-      const offset=batches[next++],batch=sample.points.slice(offset,offset+50)
-      const url=new URL(endpoint);url.searchParams.set('koordsys','4326');url.searchParams.set('punkter',JSON.stringify(batch.map(p=>[p.lon,p.lat])))
-      const response=await fetcher(url,{signal})
-      if(!response.ok)throw new Error('Høydetjenesten svarte ikke.')
-      const result=await response.json() as HeightResponse
-      if(result.koordsys!==4326||!Array.isArray(result.punkter))throw new Error('Uventet svar fra høydetjenesten.')
-      for(let i=0;i<batch.length;i++){
-        const point=batch[i]
-        const match=result.punkter.find(p=>Number.isFinite(p.x)&&Number.isFinite(p.y)&&Math.abs(p.x-point.lon)<0.000001&&Math.abs(p.y-point.lat)<0.000001)
-        if(match&&Number.isFinite(match.z))heights[offset+i]=match.z
-      }
-    }
-  }
-  try{await Promise.all([worker(),worker()])}catch{throw new GraphQLError('Høydetjenesten er utilgjengelig akkurat nå. Ruten kan fortsatt brukes og lagres; prøv høydeprofilen igjen senere.')}
-  if(heights.every(value=>value==null))throw new GraphQLError('Ingen høydedata er tilgjengelige for denne ruten.')
-  const result=summarizeElevation(sample,heights)
-  if(cache.size>=50)cache.delete(cache.keys().next().value!)
-  cache.set(key,{expires:Date.now()+3600000,value:result})
-  return result
-}
diff --git a/server/graphql/auth.ts b/server/graphql/auth.ts
new file mode 100644
index 0000000..fa9125e
--- /dev/null
+++ b/server/graphql/auth.ts
@@ -0,0 +1,191 @@
+// Registrering, innlogging, utlogging og passord. Selve sesjonene og hasjingen ligger i lib/auth.ts.
+import { randomBytes, timingSafeEqual } from 'node:crypto'
+import { GraphQLError } from 'graphql'
+import { appSchemaReady, homeColumn } from '../db/appSchema.ts'
+import { pool, withTransaction } from '../db/db.ts'
+import {
+  authed,
+  createSession,
+  passwordHash,
+  setPassword,
+  tokenHash,
+  userFromToken,
+  validateCredentials,
+  validateEmail,
+  type AuthUser,
+} from '../lib/auth.ts'
+import { checkAuthAttempt } from '../lib/authLimits.ts'
+import { validatePassword } from '../lib/validation.ts'
+import { resetDeliveryAvailable, sendPasswordReset } from '../lib/passwordMail.ts'
+import { profileFor } from './profile.ts'
+import type { ApiArgs } from './types.ts'
+
+export const authTypeDefs = /* GraphQL */ `
+  type AuthPayload {
+    token: String!
+    user: UserProfile!
+  }
+  extend type Query {
+    me(token: String!): UserProfile
+  }
+  type Mutation {
+    register(username: String!, password: String!, email: String!): AuthPayload!
+    requestPasswordReset(email: String!): Boolean!
+    resetPassword(token: String!, newPassword: String!): Boolean!
+    login(username: String!, password: String!): AuthPayload!
+    logout(token: String!): Boolean!
+    changePassword(token: String!, currentPassword: String!, newPassword: String!): Boolean!
+  }
+`
+
+export const authResolvers = {
+  Query: {
+    me: async (_: unknown, { token }: ApiArgs) => {
+      const user = await userFromToken(token)
+      return user ? profileFor(user) : null
+    },
+  },
+  Mutation: {
+    register: async (_: unknown, { username, password, email }: ApiArgs) => {
+      await appSchemaReady
+      checkAuthAttempt(username)
+      const cleanUsername = validateCredentials(username, password)
+      const cleanEmail = validateEmail(email)
+      const salt = randomBytes(16)
+      const hash = await passwordHash(password, salt)
+      try {
+        return await withTransaction(async (client) => {
+          const { rows } = await client.query(
+            `INSERT INTO norwegian_explorer_app.users(username,password_hash,password_salt,email)
+            VALUES ($1,$2,$3,$4) RETURNING id,username,email`,
+            [cleanUsername, hash, salt, cleanEmail],
+          )
+          const token = await createSession(client, rows[0].id)
+          return {
+            token,
+            user: {
+              username: rows[0].username,
+              email: cleanEmail,
+              homeMunicipality: null,
+              favorites: [],
+              trips: [],
+              goals: [],
+              stats: { completedCount: 0, plannedCount: 0, totalLengthMeters: 0, countyCount: 0 },
+            },
+          }
+        })
+      } catch (error) {
+        if (error && typeof error === 'object' && 'code' in error && error.code === '23505')
+          throw new GraphQLError('Brukernavnet er allerede i bruk.')
+        throw error
+      }
+    },
+    requestPasswordReset: async (_: unknown, { email }: ApiArgs) => {
+      await appSchemaReady
+      const cleanEmail = validateEmail(email)
+      checkAuthAttempt(`reset:${cleanEmail}`)
+      if (!resetDeliveryAvailable())
+        throw new GraphQLError(
+          'Passordtilbakestilling er ikke tilgjengelig ennå. Kontakt prosjektgruppen.',
+        )
+      const { rows } = await pool.query<{ id: string }>(
+        'SELECT id FROM norwegian_explorer_app.users WHERE lower(email)=$1',
+        [cleanEmail],
+      )
+      for (const user of rows) {
+        const resetToken = randomBytes(32).toString('base64url')
+        await pool.query(
+          "INSERT INTO norwegian_explorer_app.password_resets(token_hash,user_id,expires_at) VALUES ($1,$2,now()+interval '30 minutes')",
+          [tokenHash(resetToken), user.id],
+        )
+        try {
+          await sendPasswordReset(cleanEmail, resetToken)
+        } catch {
+          await pool.query(
+            'DELETE FROM norwegian_explorer_app.password_resets WHERE token_hash=$1',
+            [tokenHash(resetToken)],
+          )
+          throw new GraphQLError('Kunne ikke sende e-post akkurat nå. Prøv igjen senere.')
+        }
+      }
+      await pool.query('DELETE FROM norwegian_explorer_app.password_resets WHERE expires_at<=now()')
+      return true
+    },
+    resetPassword: async (_: unknown, { token, newPassword }: ApiArgs) => {
+      await appSchemaReady
+      checkAuthAttempt('password-reset')
+      if (!/^[A-Za-z0-9_-]{43}$/.test(token))
+        throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
+      validatePassword(newPassword)
+      return withTransaction(async (client) => {
+        const { rows } = await client.query<{ user_id: string }>(
+          'SELECT user_id FROM norwegian_explorer_app.password_resets WHERE token_hash=$1 AND expires_at>now()',
+          [tokenHash(token)],
+        )
+        if (!rows.length)
+          throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
+        const userId = rows[0].user_id
+        await client.query('SELECT id FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE', [
+          userId,
+        ])
+        const valid = await client.query(
+          'SELECT 1 FROM norwegian_explorer_app.password_resets WHERE token_hash=$1 AND expires_at>now()',
+          [tokenHash(token)],
+        )
+        if (!valid.rowCount)
+          throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
+        await setPassword(client, userId, newPassword)
+        return true
+      })
+    },
+    login: async (_: unknown, { username, password }: ApiArgs) => {
+      checkAuthAttempt(username)
+      if (username.length > 100 || password.length > 200)
+        throw new GraphQLError('Feil brukernavn eller passord.')
+      await appSchemaReady
+      const { user, token } = await withTransaction(async (client) => {
+        const { rows } = await client.query<AuthUser>(
+          `SELECT id,username,email,phone,avatar,${await homeColumn()},password_hash,password_salt FROM norwegian_explorer_app.users WHERE lower(username)=lower($1) FOR UPDATE`,
+          [username.trim()],
+        )
+        const found = rows[0]
+        const candidate = await passwordHash(password, found?.password_salt || Buffer.alloc(16))
+        if (
+          !found ||
+          candidate.length !== found.password_hash.length ||
+          !timingSafeEqual(candidate, found.password_hash)
+        )
+          throw new GraphQLError('Feil brukernavn eller passord.')
+        return { user: found, token: await createSession(client, found.id) }
+      })
+      return { token, user: await profileFor(user) }
+    },
+    logout: async (_: unknown, { token }: ApiArgs) => {
+      await appSchemaReady
+      await pool.query('DELETE FROM norwegian_explorer_app.sessions WHERE token_hash=$1', [
+        tokenHash(token),
+      ])
+      return true
+    },
+    changePassword: authed(async (user, { currentPassword, newPassword }: ApiArgs) => {
+      checkAuthAttempt(user.username)
+      if (currentPassword.length > 200) throw new GraphQLError('Gjeldende passord er feil.')
+      validateCredentials(user.username, newPassword)
+      if (currentPassword === newPassword)
+        throw new GraphQLError('Velg et annet passord enn det du bruker nå.')
+      return withTransaction(async (client) => {
+        const { rows } = await client.query(
+          'SELECT password_hash,password_salt FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE',
+          [user.id],
+        )
+        const stored = rows[0]
+        if (!stored) throw new GraphQLError('Du må logge inn på nytt.')
+        const candidate = await passwordHash(currentPassword, stored.password_salt)
+        if (!timingSafeEqual(candidate, stored.password_hash))
+          throw new GraphQLError('Gjeldende passord er feil.')
+        await setPassword(client, user.id, newPassword)
+        return true
+      })
+    }),
+  },
+}
diff --git a/server/graphql/builder.ts b/server/graphql/builder.ts
new file mode 100644
index 0000000..237addf
--- /dev/null
+++ b/server/graphql/builder.ts
@@ -0,0 +1,186 @@
+// Egne ruter: ruteplanlegger, rundturforslag, høydeprofil og stopp langs turen. Krever innlogging.
+import { randomBytes } from 'node:crypto'
+import { GraphQLError } from 'graphql'
+import { pool } from '../db/db.ts'
+import { authed } from '../lib/auth.ts'
+import { assertRouteId } from '../lib/validation.ts'
+import { builderNetwork, planCustomRoute, suggestRoundTrips } from '../services/customRoutes.ts'
+import { elevationProfile } from '../services/elevation.ts'
+import { routeStops } from '../services/routeStops.ts'
+import type { ApiArgs } from './types.ts'
+
+export const builderTypeDefs = /* GraphQL */ `
+  input BuilderPointInput {
+    lon: Float!
+    lat: Float!
+  }
+  type BuilderPoint {
+    lon: Float!
+    lat: Float!
+  }
+  type BuilderPreview {
+    geojson: String!
+    lengthMeters: Float!
+    waypoints: [BuilderPoint!]!
+  }
+  input RoundTripInput {
+    start: BuilderPointInput!
+    desiredLengthMeters: Float!
+    proposalId: ID!
+  }
+  type RoundTripProposal {
+    id: ID!
+    geojson: String!
+    lengthMeters: Float!
+    connectorMeters: Float!
+    differenceMeters: Float!
+    waypoints: [BuilderPoint!]!
+  }
+  type ElevationPoint {
+    distanceMeters: Float!
+    elevation: Float
+  }
+  type ElevationProfile {
+    points: [ElevationPoint!]!
+    lengthMeters: Float!
+    sampleIntervalMeters: Float!
+    ascentMeters: Float
+    descentMeters: Float
+    minElevation: Float
+    maxElevation: Float
+    complete: Boolean!
+    missingCount: Int!
+    source: String!
+  }
+  type RouteStop {
+    id: ID!
+    name: String
+    kind: String!
+    lon: Float!
+    lat: Float!
+    distanceFromRouteMeters: Float!
+    distanceFromStartMeters: Float!
+    operator: String
+    openingHours: String
+    capacity: String
+    fee: String
+    website: String
+  }
+  type RouteStopPage {
+    stops: [RouteStop!]!
+    truncated: Boolean!
+  }
+  type CustomRoute {
+    id: ID!
+    name: String!
+    description: String!
+    geojson: String!
+    lengthMeters: Float!
+    waypoints: [BuilderPoint!]!
+    updatedAt: String!
+    sourceRouteId: ID
+    sourceName: String!
+    smartPlan: String
+    stops: [RouteStop!]!
+  }
+  extend type Query {
+    builderNetwork(token: String!, routeId: ID): String!
+    previewCustomRoute(token: String!, points: [BuilderPointInput!]!, routeId: ID): BuilderPreview!
+    myCustomRoutes(token: String!): [CustomRoute!]!
+    suggestRoundTrips(
+      token: String!
+      start: BuilderPointInput!
+      desiredLengthMeters: Float!
+      routeId: ID
+    ): [RoundTripProposal!]!
+    elevationProfile(token: String!, geojson: String!): ElevationProfile!
+    routeStops(token: String!, geojson: String!): RouteStopPage!
+  }
+  extend type Mutation {
+    saveCustomRoute(
+      token: String!
+      id: ID
+      name: String!
+      description: String!
+      points: [BuilderPointInput!]!
+      routeId: ID
+      roundTrip: RoundTripInput
+      stopIds: [ID!] = []
+    ): CustomRoute!
+    deleteCustomRoute(token: String!, id: ID!): Boolean!
+  }
+`
+
+export const builderResolvers = {
+  Query: {
+    routeStops: authed(async (_user, { geojson }: ApiArgs) => {
+      return routeStops(geojson)
+    }),
+    elevationProfile: authed(async (_user, { geojson }: ApiArgs) => {
+      return elevationProfile(geojson)
+    }),
+    suggestRoundTrips: authed(async (_user, { start, desiredLengthMeters, routeId }: ApiArgs) => {
+      return suggestRoundTrips(start, desiredLengthMeters, routeId)
+    }),
+    builderNetwork: authed(async (_user, { routeId }: ApiArgs) => {
+      return (await builderNetwork(routeId)).geojson
+    }),
+    previewCustomRoute: authed(async (_user, { points, routeId }: ApiArgs) => {
+      return planCustomRoute(points, routeId)
+    }),
+    myCustomRoutes: authed(async (user) => {
+      const { rows } = await pool.query(
+        'SELECT id,name,description,geojson,length_meters AS "lengthMeters",waypoints,updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops FROM norwegian_explorer_app.custom_routes WHERE user_id=$1 ORDER BY updated_at DESC',
+        [user.id],
+      )
+      return rows
+    }),
+  },
+  Mutation: {
+    saveCustomRoute: authed(
+      async (user, { id, name, description, points, routeId, roundTrip, stopIds }: ApiArgs) => {
+        if (!name.trim() || name.trim().length > 100 || description.length > 2000)
+          throw new GraphQLError(
+            'Gi ruten et navn på maks 100 tegn og en beskrivelse på maks 2000 tegn.',
+          )
+        if (id) assertRouteId(id)
+        const preview = roundTrip
+          ? (await suggestRoundTrips(roundTrip.start, roundTrip.desiredLengthMeters, routeId)).find(
+              (item) => item.id === roundTrip.proposalId,
+            )
+          : await planCustomRoute(points, routeId)
+        if (!preview)
+          throw new GraphQLError(
+            'Rundturforslaget er ikke lenger tilgjengelig. Beregn nye forslag.',
+          )
+        const stops = (await routeStops(preview.geojson, stopIds || [])).stops
+        const customId = id || randomBytes(16).toString('hex')
+        const query = id
+          ? `UPDATE norwegian_explorer_app.custom_routes SET name=$3,description=$4,waypoints=$5,geojson=$6,length_meters=$7,source_route_id=$8,source_name=$9,smart_plan=$10,stops=$11,updated_at=now() WHERE id=$1 AND user_id=$2 RETURNING id,name,description,waypoints,geojson,length_meters AS "lengthMeters",updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops`
+          : `INSERT INTO norwegian_explorer_app.custom_routes(id,user_id,name,description,waypoints,geojson,length_meters,source_route_id,source_name,smart_plan,stops) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11) RETURNING id,name,description,waypoints,geojson,length_meters AS "lengthMeters",updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops`
+        const { rows } = await pool.query(query, [
+          customId,
+          user.id,
+          name.trim(),
+          description.trim(),
+          JSON.stringify(preview.waypoints),
+          preview.geojson,
+          preview.lengthMeters,
+          preview.sourceRouteId,
+          preview.sourceName,
+          roundTrip ? JSON.stringify(roundTrip) : null,
+          JSON.stringify(stops),
+        ])
+        if (!rows[0]) throw new GraphQLError('Ruten finnes ikke på profilen din.')
+        return rows[0]
+      },
+    ),
+    deleteCustomRoute: authed(async (user, { id }: ApiArgs) => {
+      const result = await pool.query(
+        'DELETE FROM norwegian_explorer_app.custom_routes WHERE id=$1 AND user_id=$2',
+        [id, user.id],
+      )
+      return (result.rowCount || 0) > 0
+    }),
+  },
+}
diff --git a/server/server.ts b/server/graphql/mountains.ts
similarity index 86%
rename from server/server.ts
rename to server/graphql/mountains.ts
index 99219b9..408524e 100644
--- a/server/server.ts
+++ b/server/graphql/mountains.ts
@@ -1,12 +1,17 @@
 // GraphQL-delen for fjellområdesiden (fjellomrade.html): typene og spørringene for fjellområder og turpunkter.
 // Fila starter ikke noen server selv. Den kobles inn i backenden i server/index.ts, som startes med
 // npm run dev:server, ved siden av rutesøket og innloggingen.
-import { getMountainAreas } from './mountainAreas.ts'
-import { getAreaPointsOfInterest, searchPointsOfInterest } from './pointsOfInterest.ts'
+import { getMountainAreas } from '../services/mountainAreas.ts'
+import { getAreaPointsOfInterest, searchPointsOfInterest } from '../services/pointsOfInterest.ts'
 
-// «extend type Query» legger spørringene til i Query-typen som er definert i index.ts
+// «extend type Query» legger spørringene til i Query-typen som er definert i routes.ts
 export const mountainTypeDefs = /* GraphQL */ `
-  enum PoiKind { HUT CABIN SHELTER PEAK }
+  enum PoiKind {
+    HUT
+    CABIN
+    SHELTER
+    PEAK
+  }
 
   type PointOfInterest {
     id: ID!
@@ -59,7 +64,9 @@ export const mountainTypeDefs = /* GraphQL */ `
 export const mountainResolvers = {
   Query: {
     mountainAreas: () => getMountainAreas(),
-    areaPointsOfInterest: (_: unknown, { areaId }: { areaId: string }) => getAreaPointsOfInterest(areaId),
-    searchPointsOfInterest: (_: unknown, { query }: { query: string }) => searchPointsOfInterest(query),
+    areaPointsOfInterest: (_: unknown, { areaId }: { areaId: string }) =>
+      getAreaPointsOfInterest(areaId),
+    searchPointsOfInterest: (_: unknown, { query }: { query: string }) =>
+      searchPointsOfInterest(query),
   },
 }
diff --git a/server/graphql/profile.ts b/server/graphql/profile.ts
new file mode 100644
index 0000000..f3a3627
--- /dev/null
+++ b/server/graphql/profile.ts
@@ -0,0 +1,291 @@
+// Profilen: favoritter, turstatus, dagbok, månedsmål og «Mitt sted».
+import { GraphQLError } from 'graphql'
+import { hasHomeMunicipality, homeColumn, routeCatalogReady } from '../db/appSchema.ts'
+import { pool, withTransaction } from '../db/db.ts'
+import { authed, validateEmail, type AppUser } from '../lib/auth.ts'
+import { assertRouteId } from '../lib/validation.ts'
+import type { ApiArgs } from './types.ts'
+
+export async function profileFor(user: AppUser) {
+  await routeCatalogReady
+  const { rows } = await pool.query(
+    `SELECT coalesce(c.id,f.route_id) AS id,
+      coalesce(c.name,f.route_name) AS name,coalesce(c.number,f.route_number) AS number,
+      f.created_at::text AS "createdAt"
+    FROM norwegian_explorer_app.favorites f
+    LEFT JOIN norwegian_explorer_app.route_catalog c ON c.id=f.route_id
+    WHERE f.user_id=$1 ORDER BY f.created_at DESC`,
+    [user.id],
+  )
+  const { rows: trips } = await pool.query(
+    `
+    WITH routes AS (
+      SELECT id,length_meters FROM norwegian_explorer_app.route_catalog
+      UNION ALL SELECT id,length_meters FROM norwegian_explorer_app.route_loops
+    )
+    SELECT t.route_id AS id,t.route_name AS name,t.route_number AS number,t.status,
+      t.updated_at::text AS "updatedAt",r.length_meters AS "lengthMeters",
+      t.completed_on::text AS "completedOn",t.diary_note AS "diaryNote",t.rating
+    FROM norwegian_explorer_app.user_routes t LEFT JOIN routes r ON r.id=t.route_id
+    WHERE t.user_id=$1 ORDER BY t.updated_at DESC`,
+    [user.id],
+  )
+  const { rows: counties } = await pool.query(
+    `SELECT count(DISTINCT a.county_number)::int AS count
+    FROM norwegian_explorer_app.user_routes t JOIN norwegian_explorer_app.route_areas a ON a.route_id=t.route_id
+    WHERE t.user_id=$1 AND t.status='COMPLETED'`,
+    [user.id],
+  )
+  const completed = trips.filter((trip) => trip.status === 'COMPLETED')
+  const { rows: goals } = await pool.query(
+    'SELECT month,target FROM norwegian_explorer_app.user_goals WHERE user_id=$1 ORDER BY month DESC',
+    [user.id],
+  )
+  return {
+    username: user.username,
+    email: user.email,
+    phone: user.phone,
+    avatar: user.avatar,
+    homeMunicipality: await municipalityByCode(user.home_municipality),
+    favorites: rows,
+    trips,
+    goals,
+    stats: {
+      completedCount: completed.length,
+      plannedCount: trips.length - completed.length,
+      totalLengthMeters: completed.reduce((sum, trip) => sum + (trip.lengthMeters || 0), 0),
+      countyCount: counties[0].count,
+    },
+  }
+}
+// Kartutsnitt rundt turene i en kommune, slik at kartet på Utforsk kan starte der.
+// Vi har ikke kommunegrensene i databasen, så utsnittet regnes ut fra rutene som ligger i kommunen.
+// Svært lange ruter (over 30 km) strekker seg ofte langt ut av kommunen, så de tas bare med
+// hvis kommunen ikke har kortere ruter. Gir null hvis kommunen ikke har noen ruter.
+export async function municipalityBbox(code: string) {
+  await routeCatalogReady
+  const { rows } = await pool.query(
+    `
+    WITH routes AS (
+      SELECT c.geom, c.length_meters FROM norwegian_explorer_app.route_areas a
+      JOIN norwegian_explorer_app.route_catalog c ON c.id=a.route_id
+      WHERE a.municipality_number=$1
+    ), chosen AS (
+      SELECT geom FROM routes WHERE length_meters<=30000
+      UNION ALL SELECT geom FROM routes WHERE NOT EXISTS (SELECT 1 FROM routes WHERE length_meters<=30000)
+    ), extent AS (SELECT ST_Transform(ST_SetSRID(ST_Extent(geom)::geometry,25833),4326) AS box FROM chosen)
+    SELECT CASE WHEN box IS NULL THEN NULL ELSE ARRAY[ST_XMin(box),ST_YMin(box),ST_XMax(box),ST_YMax(box)]::float8[] END AS bbox FROM extent`,
+    [code],
+  )
+  return rows[0]?.bbox ?? null
+}
+export async function municipalityByCode(code: string | null) {
+  if (!code) return null
+  await routeCatalogReady
+  const { rows } = await pool.query(
+    `SELECT municipality_number AS code,min(municipality_name) AS name
+    FROM norwegian_explorer_app.route_areas WHERE municipality_number=$1 GROUP BY municipality_number`,
+    [code],
+  )
+  return rows[0] || null
+}
+
+/** Slår opp en rute (fra Kartverket eller en avledet rundtur) og gir navn og nummer. */
+async function findRouteById(routeId: string) {
+  await routeCatalogReady
+  const { rows } = await pool.query<{ name: string; number: string }>(
+    `SELECT name,number FROM norwegian_explorer_app.route_catalog WHERE id=$1
+    UNION ALL SELECT name,number FROM norwegian_explorer_app.route_loops WHERE id=$1`,
+    [routeId],
+  )
+  if (!rows[0]) throw new GraphQLError('Ruten finnes ikke.')
+  return rows[0]
+}
+
+export const profileTypeDefs = /* GraphQL */ `
+  type Favorite {
+    id: ID!
+    name: String!
+    number: String!
+    createdAt: String!
+  }
+  enum TripStatus {
+    PLANNED
+    COMPLETED
+  }
+  type UserTrip {
+    id: ID!
+    name: String!
+    number: String!
+    status: TripStatus!
+    updatedAt: String!
+    lengthMeters: Float
+    completedOn: String
+    diaryNote: String
+    rating: Int
+  }
+  type TripStats {
+    completedCount: Int!
+    plannedCount: Int!
+    totalLengthMeters: Float!
+    countyCount: Int!
+  }
+  type MonthlyGoal {
+    month: String!
+    target: Int!
+  }
+  type UserProfile {
+    username: String!
+    email: String
+    phone: String
+    avatar: String
+    homeMunicipality: Municipality
+    favorites: [Favorite!]!
+    trips: [UserTrip!]!
+    goals: [MonthlyGoal!]!
+    stats: TripStats!
+  }
+  extend type Mutation {
+    toggleFavorite(token: String!, routeId: ID!): UserProfile!
+    setHomeMunicipality(token: String!, code: String): UserProfile!
+    updateProfile(token: String!, email: String, phone: String, avatar: String): UserProfile!
+    setTripStatus(token: String!, routeId: ID!, status: TripStatus): UserProfile!
+    saveTripDiary(
+      token: String!
+      routeId: ID!
+      completedOn: String
+      diaryNote: String
+      rating: Int
+    ): UserProfile!
+    setMonthlyGoal(token: String!, month: String!, target: Int): UserProfile!
+  }
+`
+
+export const profileResolvers = {
+  Mutation: {
+    toggleFavorite: authed(async (user, { routeId }: ApiArgs) => {
+      assertRouteId(routeId)
+      await routeCatalogReady
+      const route = await findRouteById(routeId)
+      await withTransaction(async (client) => {
+        await client.query('SELECT id FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE', [
+          user.id,
+        ])
+        const removed = await client.query(
+          'DELETE FROM norwegian_explorer_app.favorites WHERE user_id=$1 AND route_id=$2 RETURNING 1',
+          [user.id, routeId],
+        )
+        if (!removed.rowCount)
+          await client.query(
+            'INSERT INTO norwegian_explorer_app.favorites(user_id,route_id,route_name,route_number) VALUES($1,$2,$3,$4)',
+            [user.id, routeId, route.name, route.number],
+          )
+      })
+      return profileFor(user)
+    }),
+    setMonthlyGoal: authed(async (user, { month, target }: ApiArgs) => {
+      if (!/^[0-9]{4}-(0[1-9]|1[0-2])$/.test(month)) throw new GraphQLError('Velg en gyldig måned.')
+      if (target == null) {
+        await pool.query(
+          'DELETE FROM norwegian_explorer_app.user_goals WHERE user_id=$1 AND month=$2',
+          [user.id, month],
+        )
+      } else {
+        if (!Number.isInteger(target) || target < 1 || target > 1000)
+          throw new GraphQLError('Målet må være mellom 1 og 1000 turer.')
+        await pool.query(
+          `INSERT INTO norwegian_explorer_app.user_goals(user_id,month,target) VALUES ($1,$2,$3)
+          ON CONFLICT (user_id,month) DO UPDATE SET target=excluded.target`,
+          [user.id, month, target],
+        )
+      }
+      return profileFor(user)
+    }),
+    saveTripDiary: authed(async (user, { routeId, completedOn, diaryNote, rating }: ApiArgs) => {
+      assertRouteId(routeId)
+      const date = completedOn || null
+      if (
+        date &&
+        (!/^\d{4}-\d{2}-\d{2}$/.test(date) ||
+          !Number.isFinite(Date.parse(date)) ||
+          new Date(date).toISOString().slice(0, 10) !== date)
+      )
+        throw new GraphQLError('Skriv inn en gyldig dato.')
+      if (diaryNote && diaryNote.length > 2000)
+        throw new GraphQLError('Notatet kan være maks 2000 tegn.')
+      if (rating != null && (!Number.isInteger(rating) || rating < 1 || rating > 5))
+        throw new GraphQLError('Vurderingen må være mellom 1 og 5.')
+      const result = await pool.query(
+        `UPDATE norwegian_explorer_app.user_routes
+        SET completed_on=$3,diary_note=$4,rating=$5,updated_at=now()
+        WHERE user_id=$1 AND route_id=$2 AND status='COMPLETED' RETURNING route_id`,
+        [user.id, routeId, date, diaryNote?.trim() || null, rating ?? null],
+      )
+      if (!result.rowCount)
+        throw new GraphQLError('Marker turen som gjennomført før du skriver i dagboken.')
+      return profileFor(user)
+    }),
+    setTripStatus: authed(async (user, { routeId, status }: ApiArgs) => {
+      assertRouteId(routeId)
+      if (status == null) {
+        await pool.query(
+          'DELETE FROM norwegian_explorer_app.user_routes WHERE user_id=$1 AND route_id=$2',
+          [user.id, routeId],
+        )
+      } else {
+        const route = await findRouteById(routeId)
+        await pool.query(
+          `INSERT INTO norwegian_explorer_app.user_routes(user_id,route_id,route_name,route_number,status)
+          VALUES ($1,$2,$3,$4,$5) ON CONFLICT (user_id,route_id) DO UPDATE SET status=excluded.status,updated_at=now()`,
+          [user.id, routeId, route.name, route.number, status],
+        )
+      }
+      return profileFor(user)
+    }),
+    setHomeMunicipality: authed(async (user, { code }: ApiArgs) => {
+      const cleanCode = code?.trim() || null
+      // Godta bare kommuner som faktisk finnes i rutedataene
+      if (cleanCode && !(await municipalityByCode(cleanCode)))
+        throw new GraphQLError('Ukjent kommune.')
+      if (!(await hasHomeMunicipality))
+        throw new GraphQLError('Stedsvalg er ikke slått på i databasen ennå.')
+      const { rows } = await pool.query(
+        `UPDATE norwegian_explorer_app.users SET home_municipality=$2
+        WHERE id=$1 RETURNING id,username,email,phone,avatar,home_municipality`,
+        [user.id, cleanCode],
+      )
+      return profileFor(rows[0])
+    }),
+    updateProfile: authed(async (user, { email, phone, avatar }: ApiArgs) => {
+      const cleanEmail = validateEmail(email)
+      const cleanPhone = phone?.trim() || null
+      const cleanAvatar = avatar?.trim() || null
+      if (cleanPhone && !/^\+?[0-9 ()-]{6,20}$/.test(cleanPhone))
+        throw new GraphQLError('Skriv inn et gyldig telefonnummer.')
+      if (
+        cleanAvatar &&
+        (!/^data:image\/(png|jpeg|webp|gif);base64,[A-Za-z0-9+/]+={0,2}$/.test(cleanAvatar) ||
+          cleanAvatar.length > 600000)
+      )
+        throw new GraphQLError('Profilbildet må være et bilde på under 450 KB.')
+      const updated = await withTransaction(async (client) => {
+        const { rows } = await client.query<AppUser>(
+          'SELECT id, email FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE',
+          [user.id],
+        )
+        if (rows[0].email?.toLowerCase() !== cleanEmail)
+          await client.query(
+            'DELETE FROM norwegian_explorer_app.password_resets WHERE user_id=$1',
+            [user.id],
+          )
+        const result = await client.query<AppUser>(
+          `UPDATE norwegian_explorer_app.users
+          SET email=$2,phone=$3,avatar=$4 WHERE id=$1 RETURNING id,username,email,phone,avatar,${await homeColumn()}`,
+          [user.id, cleanEmail, cleanPhone, cleanAvatar],
+        )
+        return result.rows[0]
+      })
+      return profileFor(updated)
+    }),
+  },
+}
diff --git a/server/graphql/routes.ts b/server/graphql/routes.ts
new file mode 100644
index 0000000..1205ddd
--- /dev/null
+++ b/server/graphql/routes.ts
@@ -0,0 +1,422 @@
+// Tursøk og ruter fra Kartverket: lister, detaljer, populære turer, kommuner og OSM-data i kartutsnittet.
+import { GraphQLError } from 'graphql'
+import { routeCatalogReady } from '../db/appSchema.ts'
+import { pool } from '../db/db.ts'
+import { isValidBounds } from '../lib/validation.ts'
+import { nearbyFacilityRouteIds } from '../services/routeStops.ts'
+import { municipalityBbox } from './profile.ts'
+import type { ApiArgs } from './types.ts'
+
+// Filtre i routes som kan ha flere verdier. Innen ett filter er det «eller» (Enkel eller Middels),
+// for steder langs turen er det «og» (turen må ha både hytte og utsiktspunkt i nærheten).
+type RouteListArgs = {
+  difficulty: string[] | null
+  routeType: string[] | null
+  facility: string[] | null
+  sort: RouteSort
+}
+type RouteSort = 'NAME' | 'SHORTEST' | 'LONGEST' | 'POPULAR'
+// ORDER BY for hver sortering. Teksten settes rett inn i SQL, men kommer bare fra denne lista (ikke fra brukeren).
+// key til slutt gjør rekkefølgen entydig, så pagineringen ikke hopper over eller gjentar turer.
+const ROUTE_SORT_ORDER: Record<RouteSort, string> = {
+  NAME: 'name, key',
+  SHORTEST: '"minLengthMeters", name, key',
+  LONGEST: '"maxLengthMeters" DESC, name, key',
+  POPULAR: '"favoriteCount" DESC, name, key',
+}
+const validFilterList = (list: string[] | null) =>
+  list == null ||
+  (list.length <= 12 && list.every((item) => typeof item === 'string' && item.length <= 40))
+
+async function loadRoute(name: string, number: string) {
+  await routeCatalogReady
+  const { rows } = await pool.query(
+    `
+      SELECT id,name,number,segment_count AS "segmentCount",length_meters AS "lengthMeters",
+        connected,maintainer,difficulty,route_type AS "routeType",description,
+        name_quality AS "nameQuality",d.duplicate_count AS "duplicateCount",
+        (SELECT count(*)::int FROM norwegian_explorer_app.route_catalog c2
+          JOIN norwegian_explorer_app.route_duplicate_map d2 ON d2.route_id=c2.id AND d2.canonical_id=c2.id
+          WHERE lower(c2.name)=lower(c.name)) AS "variantCount",
+        ST_AsGeoJSON(ST_Transform(geom,4326)) AS geojson
+      FROM norwegian_explorer_app.route_catalog c
+      JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id
+      WHERE name=$1 AND number=$2
+        AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
+      UNION ALL
+      SELECT l.id,l.name,l.number,l.source_variant_count AS "segmentCount",l.length_meters AS "lengthMeters",
+        true AS connected,'Avledet fra registrerte rutevarianter' AS maintainer,NULL AS difficulty,
+        CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END AS "routeType",
+        'Dette rutevalget er beregnet fra registrerte stier. Ingen forbindelser over datagap er lagt til. Rutevalget er ikke et offisielt turforslag.' AS description,
+        'derived' AS "nameQuality",1 AS "duplicateCount",
+        (SELECT count(*)::int + 1 FROM norwegian_explorer_app.route_catalog c2
+          JOIN norwegian_explorer_app.route_duplicate_map d2 ON d2.route_id=c2.id AND d2.canonical_id=c2.id
+          WHERE lower(c2.name)=lower(l.name)) AS "variantCount",
+        ST_AsGeoJSON(ST_Transform(l.geom,4326)) AS geojson
+      FROM norwegian_explorer_app.route_loops l WHERE l.name=$1 AND l.number=$2`,
+    [name.trim(), number.trim()],
+  )
+  return rows[0] || null
+}
+
+export const routeTypeDefs = /* GraphQL */ `
+  type Route {
+    id: ID!
+    name: String!
+    number: String!
+    lengthMeters: Float!
+    segmentCount: Int!
+    connected: Boolean!
+    maintainer: String
+    difficulty: String
+    description: String
+    routeType: String
+    nameQuality: String!
+    duplicateCount: Int!
+    variantCount: Int!
+    geojson: String!
+  }
+  type RouteSummary {
+    id: ID!
+    name: String!
+    number: String!
+    lengthMeters: Float!
+    difficulty: String
+    routeType: String
+    duplicateCount: Int!
+    variantCount: Int!
+  }
+  "Sortering av turlister: navn, korteste/lengste først, eller flest favoritter først"
+  enum RouteSort {
+    NAME
+    SHORTEST
+    LONGEST
+    POPULAR
+  }
+  type RouteGroup {
+    key: String!
+    name: String!
+    variantCount: Int!
+    minLengthMeters: Float!
+    maxLengthMeters: Float!
+    favoriteCount: Int!
+    variants: [RouteSummary!]!
+  }
+  type RoutePage {
+    items: [RouteGroup!]!
+    total: Int!
+  }
+  type PopularRoute {
+    favoriteCount: Int!
+    route: RouteSummary!
+  }
+  "Kommune. bbox er [vest, sør, øst, nord] i grader rundt turene i kommunen, brukes til å zoome kartet dit."
+  type Municipality {
+    code: String!
+    name: String!
+    bbox: [Float!]
+  }
+  type AreaOption {
+    code: String!
+    name: String!
+    routeCount: Int!
+  }
+  "Kommune fra søket. bbox som på Municipality, så kartet kan fly dit."
+  type MunicipalityHit {
+    code: String!
+    name: String!
+    routeCount: Int!
+    bbox: [Float!]
+  }
+  type AreaOptions {
+    counties: [AreaOption!]!
+    municipalities: [AreaOption!]!
+  }
+  type OsmPage {
+    geojson: String!
+    truncated: Boolean!
+  }
+  type Query {
+    osmNearby(west: Float!, south: Float!, east: Float!, north: Float!): OsmPage!
+    routes(
+      search: String = ""
+      minLength: Float
+      maxLength: Float
+      difficulty: [String!]
+      routeType: [String!]
+      county: String
+      municipality: String
+      facility: [String!]
+      sort: RouteSort = NAME
+      west: Float
+      south: Float
+      east: Float
+      north: Float
+      offset: Int = 0
+      limit: Int = 12
+    ): RoutePage!
+    areas(county: String): AreaOptions!
+    route(name: String!, number: String!): Route
+    routeVariants(name: String!): [RouteSummary!]!
+    popularRoutes(limit: Int = 6): [PopularRoute!]!
+    searchMunicipalities(query: String!, limit: Int = 4): [MunicipalityHit!]!
+    exampleRoute: Route
+  }
+`
+
+export const routeResolvers = {
+  Query: {
+    osmNearby: async (_: unknown, { west, south, east, north }: ApiArgs) => {
+      if (!isValidBounds(west, south, east, north) || east - west > 0.5 || north - south > 0.5)
+        throw new GraphQLError('Velg et mindre kartområde for OSM-data.')
+      const { rows } = await pool.query(
+        `
+        SELECT osm_type,osm_id::text,name,category,
+          coalesce(tags->>'amenity',tags->>'tourism',tags->>'natural',tags->>'highway') AS kind,
+          ST_AsGeoJSON(CASE WHEN category='place' THEN ST_PointOnSurface(geom)
+            ELSE ST_SimplifyPreserveTopology(geom,0.00001) END)::json AS geometry
+        FROM osm_import.objects
+        WHERE category IN ('trail','place')
+          AND geom && ST_MakeEnvelope($1,$2,$3,$4,4326)
+          AND ST_Intersects(geom,ST_MakeEnvelope($1,$2,$3,$4,4326))
+          AND coalesce(tags->>'access','') NOT IN ('no','private')
+          AND coalesce(tags->>'foot','') NOT IN ('no','private')
+          AND (category='place' OR GeometryType(geom) IN ('LINESTRING','MULTILINESTRING'))
+        ORDER BY category,osm_type,osm_id LIMIT 1001`,
+        [west, south, east, north],
+      )
+      return {
+        truncated: rows.length > 1000,
+        geojson: JSON.stringify({
+          type: 'FeatureCollection',
+          features: rows.slice(0, 1000).map((r) => ({
+            type: 'Feature',
+            geometry: r.geometry,
+            properties: {
+              id: r.osm_type + '/' + r.osm_id,
+              name: r.name,
+              category: r.category,
+              kind: r.kind,
+            },
+          })),
+        }),
+      }
+    },
+    areas: async (_: unknown, { county }: ApiArgs) => {
+      await routeCatalogReady
+      const [countyResult, municipalityResult] = await Promise.all([
+        pool.query(`SELECT county_number AS code,min(county_name) AS name,count(DISTINCT route_id)::int AS "routeCount"
+          FROM norwegian_explorer_app.route_areas GROUP BY county_number ORDER BY name`),
+        pool.query(
+          `SELECT municipality_number AS code,min(municipality_name) AS name,count(DISTINCT route_id)::int AS "routeCount"
+          FROM norwegian_explorer_app.route_areas WHERE ($1::text IS NULL OR county_number=$1)
+          GROUP BY municipality_number ORDER BY name`,
+          [county || null],
+        ),
+      ])
+      return { counties: countyResult.rows, municipalities: municipalityResult.rows }
+    },
+    routes: async (_: unknown, args: ApiArgs) => {
+      const {
+        search,
+        minLength,
+        maxLength,
+        county,
+        municipality,
+        west,
+        south,
+        east,
+        north,
+        offset,
+        limit,
+      } = args
+      const { difficulty, routeType, facility, sort } = args as unknown as RouteListArgs
+      if (
+        ![difficulty, routeType, facility].every(validFilterList) ||
+        !Object.hasOwn(ROUTE_SORT_ORDER, sort)
+      )
+        throw new GraphQLError('Ugyldig filter eller sortering.')
+      await routeCatalogReady
+      const bounds = [west, south, east, north]
+      const hasBounds = bounds.every(Number.isFinite)
+      if (
+        search == null ||
+        search.length > 120 ||
+        !Number.isInteger(offset) ||
+        offset < 0 ||
+        offset > 100000 ||
+        !Number.isInteger(limit) ||
+        limit < 1 ||
+        limit > 30 ||
+        (minLength != null && (!Number.isFinite(minLength) || minLength < 0)) ||
+        (maxLength != null && (!Number.isFinite(maxLength) || maxLength < 0)) ||
+        (minLength != null && maxLength != null && minLength > maxLength) ||
+        (bounds.some((value) => value != null) && !hasBounds) ||
+        (hasBounds && !isValidBounds(west, south, east, north))
+      ) {
+        throw new GraphQLError('Ugyldig søk eller sidestørrelse.')
+      }
+      // Turer nær alle valgte steder: snittet av id-listene for hver stedstype (listene er mellomlagret i routeStops.ts)
+      let facilityIds: string[] | null = null
+      for (const item of new Set(facility ?? [])) {
+        const ids = new Set((await nearbyFacilityRouteIds(item)) ?? [])
+        facilityIds = facilityIds ? facilityIds.filter((id) => ids.has(id)) : [...ids]
+      }
+      const { rows } = await pool.query(
+        `
+        WITH favorite_counts AS (
+          SELECT route_id, count(*)::int AS n FROM norwegian_explorer_app.favorites WHERE route_id IS NOT NULL GROUP BY route_id
+        ), base AS (
+          SELECT c.id,c.name,c.number,c.length_meters,c.difficulty,c.route_type,c.geom,
+            d.duplicate_count AS "duplicateCount"
+          FROM norwegian_explorer_app.route_catalog c
+          JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
+          WHERE c.name_quality <> 'suspect'
+            AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
+          UNION ALL
+          SELECT l.id,l.name,l.number,l.length_meters,NULL,CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END,l.geom,1
+          FROM norwegian_explorer_app.route_loops l
+        ), canonical AS (
+          SELECT base.*,count(*) OVER (PARTITION BY lower(name))::int AS "variantCount"
+          FROM base
+        ), matches AS (
+          SELECT id,name,number,length_meters AS "lengthMeters",difficulty,route_type AS "routeType",
+            "duplicateCount","variantCount"
+          FROM canonical
+          WHERE true
+            AND strpos(lower(name),lower($1)) > 0
+            AND ($14::text[] IS NULL OR id=ANY($14))
+            AND ($2::float8 IS NULL OR length_meters >= $2 * 1000)
+            AND ($3::float8 IS NULL OR length_meters <= $3 * 1000)
+            AND ($8::text[] IS NULL OR string_to_array(coalesce(difficulty,'Ikke gradert'), ', ') && $8::text[])
+            AND ($9::text[] IS NULL OR string_to_array(coalesce(route_type,'Ikke oppgitt'), ', ') && $9::text[])
+            AND ($10::text IS NULL OR EXISTS (SELECT 1 FROM norwegian_explorer_app.route_areas a WHERE a.route_id=canonical.id AND a.county_number=$10))
+            AND ($11::text IS NULL OR EXISTS (SELECT 1 FROM norwegian_explorer_app.route_areas a WHERE a.route_id=canonical.id AND a.municipality_number=$11))
+            AND ($4::float8 IS NULL OR (
+              geom && ST_Transform(ST_MakeEnvelope($4,$5,$6,$7,4326),25833)
+              AND ST_Intersects(geom,ST_Transform(ST_MakeEnvelope($4,$5,$6,$7,4326),25833))))
+        ), grouped AS (
+          SELECT lower(name) AS key,min(name) AS name,count(*)::int AS "variantCount",
+            min("lengthMeters") AS "minLengthMeters",max("lengthMeters") AS "maxLengthMeters",
+            coalesce(sum(fc.n),0)::int AS "favoriteCount",
+            json_agg(json_build_object(
+              'id',id,'name',name,'number',number,'lengthMeters',"lengthMeters",
+              'difficulty',difficulty,'routeType',"routeType",'duplicateCount',"duplicateCount",
+              'variantCount',"variantCount") ORDER BY "lengthMeters",number) AS variants
+          FROM matches LEFT JOIN favorite_counts fc ON fc.route_id=matches.id GROUP BY lower(name)
+        ), page AS (
+          SELECT *, row_number() OVER (ORDER BY ${ROUTE_SORT_ORDER[sort]}) AS position
+          FROM grouped ORDER BY ${ROUTE_SORT_ORDER[sort]} LIMIT $12 OFFSET $13
+        )
+        SELECT (SELECT count(*)::int FROM grouped) AS total,
+          coalesce((SELECT json_agg(page ORDER BY position) FROM page),'[]'::json) AS items
+      `,
+        [
+          search.trim(),
+          minLength ?? null,
+          maxLength ?? null,
+          hasBounds ? west : null,
+          hasBounds ? south : null,
+          hasBounds ? east : null,
+          hasBounds ? north : null,
+          difficulty?.length ? difficulty : null,
+          routeType?.length ? routeType : null,
+          county || null,
+          municipality || null,
+          limit,
+          offset,
+          facilityIds,
+        ],
+      )
+      return rows[0]
+    },
+    popularRoutes: async (_: unknown, { limit }: ApiArgs) => {
+      if (!Number.isInteger(limit) || limit < 1 || limit > 30)
+        throw new GraphQLError('Ugyldig antall.')
+      await routeCatalogReady
+      // Én rad per rutenavn (den mest lagrede varianten). Har få turer favoritter ennå, fylles lista opp
+      // med graderte turer som har beskrivelse, deretter turer som er registrert flere ganger i Kartverkets data.
+      const { rows } = await pool.query(
+        `
+          WITH favorite_counts AS (
+            SELECT route_id, count(*)::int AS n FROM norwegian_explorer_app.favorites
+            WHERE route_id IS NOT NULL GROUP BY route_id
+          ), candidates AS (
+            SELECT DISTINCT ON (lower(c.name))
+              c.id, c.name, c.number, c.length_meters, c.difficulty, c.route_type, c.description,
+              d.duplicate_count, coalesce(f.n, 0) AS favorite_count
+            FROM norwegian_explorer_app.route_catalog c
+            JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
+            LEFT JOIN favorite_counts f ON f.route_id=c.id
+            WHERE c.name_quality <> 'suspect' AND c.length_meters >= 1000
+              AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
+            ORDER BY lower(c.name), coalesce(f.n, 0) DESC, d.duplicate_count DESC, c.length_meters
+          )
+          SELECT favorite_count AS "favoriteCount", json_build_object(
+              'id', id, 'name', name, 'number', number, 'lengthMeters', length_meters,
+              'difficulty', difficulty, 'routeType', route_type, 'duplicateCount', duplicate_count, 'variantCount', 1
+            ) AS route
+          FROM candidates
+          ORDER BY favorite_count DESC, (difficulty IS NOT NULL AND description IS NOT NULL) DESC,
+            duplicate_count DESC, name
+          LIMIT $1`,
+        [limit],
+      )
+      return rows
+    },
+    searchMunicipalities: async (_: unknown, { query, limit }: ApiArgs) => {
+      const search = query.trim()
+      if (!search || search.length > 120 || !Number.isInteger(limit) || limit < 1 || limit > 20)
+        throw new GraphQLError('Ugyldig søk.')
+      await routeCatalogReady
+      // Navn som starter med søketeksten kommer først, deretter kommunene med flest turer
+      const { rows } = await pool.query(
+        `
+          SELECT municipality_number AS code, min(municipality_name) AS name, count(DISTINCT route_id)::int AS "routeCount"
+          FROM norwegian_explorer_app.route_areas
+          WHERE strpos(lower(municipality_name), lower($1)) > 0
+          GROUP BY municipality_number
+          ORDER BY bool_or(lower(municipality_name) LIKE lower($1) || '%') DESC, "routeCount" DESC, name
+          LIMIT $2`,
+        [search, limit],
+      )
+      return rows
+    },
+    exampleRoute: () => loadRoute('Romsdalseggen', 'F_20140827_2'),
+    route: (_: unknown, { name, number }: ApiArgs) => {
+      if (!name.trim() || name.length > 500 || !number.trim() || number.length > 500)
+        throw new GraphQLError('Ugyldig rute.')
+      return loadRoute(name, number)
+    },
+    routeVariants: async (_: unknown, { name }: ApiArgs) => {
+      if (!name.trim() || name.length > 500) throw new GraphQLError('Ugyldig rutenavn.')
+      await routeCatalogReady
+      const { rows } = await pool.query(
+        `
+        WITH variants AS (
+          SELECT c.id,c.name,c.number,c.length_meters,c.difficulty,c.route_type,
+            d.duplicate_count AS "duplicateCount"
+          FROM norwegian_explorer_app.route_catalog c
+          JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
+          WHERE lower(c.name)=lower($1) AND c.name_quality<>'suspect'
+            AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
+          UNION ALL
+          SELECT l.id,l.name,l.number,l.length_meters,NULL,CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END,1
+          FROM norwegian_explorer_app.route_loops l WHERE lower(l.name)=lower($1)
+        )
+        SELECT id,name,number,length_meters AS "lengthMeters",difficulty,
+          route_type AS "routeType","duplicateCount",count(*) OVER ()::int AS "variantCount"
+        FROM variants ORDER BY CASE WHEN number='SAMLET_RUNDE' THEN 0 ELSE 1 END,length_meters,number`,
+        [name.trim()],
+      )
+      return rows
+    },
+  },
+  Municipality: {
+    // Regnes bare ut når klienten ber om feltet
+    bbox: ({ code }: { code: string }) => municipalityBbox(code),
+  },
+  MunicipalityHit: {
+    bbox: ({ code }: { code: string }) => municipalityBbox(code),
+  },
+}
diff --git a/server/graphql/types.ts b/server/graphql/types.ts
new file mode 100644
index 0000000..1373ef4
--- /dev/null
+++ b/server/graphql/types.ts
@@ -0,0 +1,46 @@
+import type { BuilderPoint } from '../services/customRoutes.ts'
+
+// Argumentene til alle resolvere. Hver resolver leser bare feltene den har i spørringen sin.
+export type ApiArgs = {
+  query: string
+  code: string | null
+  token: string
+  username: string
+  password: string
+  name: string
+  number: string
+  geojson: string
+  search: string
+  county: string | null
+  municipality: string | null
+  facility: string | null
+  difficulty: string | null
+  routeType: string | null
+  west: number
+  south: number
+  east: number
+  north: number
+  offset: number
+  limit: number
+  minLength: number | null
+  maxLength: number | null
+  routeId: string | null
+  id: string | null
+  points: BuilderPoint[]
+  start: BuilderPoint
+  desiredLengthMeters: number
+  description: string
+  stopIds: string[]
+  roundTrip: { start: BuilderPoint; desiredLengthMeters: number; proposalId: string } | null
+  currentPassword: string
+  newPassword: string
+  month: string
+  target: number | null
+  completedOn: string | null
+  diaryNote: string | null
+  rating: number | null
+  status: 'PLANNED' | 'COMPLETED' | null
+  email: string | null
+  phone: string | null
+  avatar: string | null
+}
diff --git a/server/index.ts b/server/index.ts
index 83b5928..14848a7 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -1,742 +1,34 @@
-import { resetDeliveryAvailable, sendPasswordReset } from './passwordMail.ts'
+// Starter GraphQL-serveren. Skjemaet settes sammen av modulene i server/graphql/.
 import { createServer } from 'node:http'
-import { createHash, randomBytes, scrypt as scryptCallback, timingSafeEqual } from 'node:crypto'
-import { promisify } from 'node:util'
-import { GraphQLError } from 'graphql'
 import { createSchema, createYoga } from 'graphql-yoga'
-import type {Pool,PoolClient} from 'pg'
-import type {BuilderPoint} from './customRoutes.ts'
-import { pool } from './db.ts'
-import { mountainResolvers, mountainTypeDefs } from './server.ts'
-import { builderNetwork, planCustomRoute, suggestRoundTrips } from './customRoutes.ts'
-import { elevationProfile } from './elevation.ts'
-import { routeStops, nearbyFacilityRouteIds } from './routeStops.ts'
-import {checkAuthAttempt} from './authLimits.ts'
-import {requestSafety} from './requestSafety.ts'
-
-const schemaName = process.env.DATA_SCHEMA || 'turogfriluftsruter_1b2541ab00554564ae88dabc8bb90c02'
-if (!/^[a-z_][a-z0-9_]*$/.test(schemaName)) throw new Error('Invalid DATA_SCHEMA')
-type AppUser={id:string;username:string;email:string|null;phone:string|null;avatar:string|null;home_municipality:string|null}
-type AuthUser=AppUser & {password_hash:Buffer;password_salt:Buffer}
-type ApiArgs={query:string;code:string|null;token:string;username:string;password:string;name:string;number:string;geojson:string;search:string;county:string|null;municipality:string|null;facility:string|null;difficulty:string|null;routeType:string|null;west:number;south:number;east:number;north:number;offset:number;limit:number;minLength:number|null;maxLength:number|null;routeId:string|null;id:string|null;points:BuilderPoint[];start:BuilderPoint;desiredLengthMeters:number;description:string;stopIds:string[];roundTrip:{start:BuilderPoint;desiredLengthMeters:number;proposalId:string}|null;currentPassword:string;newPassword:string;month:string;target:number|null;completedOn:string|null;diaryNote:string|null;rating:number|null;status:'PLANNED'|'COMPLETED'|null;email:string|null;phone:string|null;avatar:string|null}
-const scrypt = promisify(scryptCallback) as (password:string,salt:Buffer,length:number)=>Promise<Buffer>
-const appSchemaSetup = pool.query(`
-  CREATE SCHEMA IF NOT EXISTS norwegian_explorer_app;
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.users (
-    id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
-    username text NOT NULL UNIQUE,
-    password_hash bytea NOT NULL,
-    password_salt bytea NOT NULL,
-    created_at timestamptz NOT NULL DEFAULT now()
-  );
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.password_resets (
-    token_hash bytea PRIMARY KEY,
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    expires_at timestamptz NOT NULL
-  );
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.sessions (
-    token_hash bytea PRIMARY KEY,
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    expires_at timestamptz NOT NULL
-  );
-  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS email text;
-  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS phone text;
-  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS avatar text;
-  ALTER TABLE norwegian_explorer_app.users ADD COLUMN IF NOT EXISTS home_municipality text;
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.favorites (
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    route_name text NOT NULL,
-    route_number text NOT NULL,
-    created_at timestamptz NOT NULL DEFAULT now(),
-    PRIMARY KEY (user_id, route_name, route_number)
-  );
-  ALTER TABLE norwegian_explorer_app.favorites ADD COLUMN IF NOT EXISTS route_id text;
-  CREATE UNIQUE INDEX IF NOT EXISTS favorites_user_route_id_idx
-    ON norwegian_explorer_app.favorites (user_id, route_id) WHERE route_id IS NOT NULL;
-  CREATE UNIQUE INDEX IF NOT EXISTS users_username_lower_idx ON norwegian_explorer_app.users (lower(username));
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.user_routes (
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    route_id text NOT NULL,
-    route_name text NOT NULL,
-    route_number text NOT NULL,
-    status text NOT NULL CHECK (status IN ('PLANNED','COMPLETED')),
-    updated_at timestamptz NOT NULL DEFAULT now(),
-    PRIMARY KEY (user_id,route_id)
-  );
-  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS completed_on date;
-  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS diary_note text;
-  ALTER TABLE norwegian_explorer_app.user_routes ADD COLUMN IF NOT EXISTS rating integer CHECK (rating BETWEEN 1 AND 5);
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.user_goals (
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    month text NOT NULL CHECK (month ~ '^[0-9]{4}-(0[1-9]|1[0-2])$'),
-    target integer NOT NULL CHECK (target BETWEEN 1 AND 1000),
-    PRIMARY KEY (user_id,month)
-  );
-  CREATE TABLE IF NOT EXISTS norwegian_explorer_app.custom_routes (
-    id text PRIMARY KEY,
-    user_id bigint NOT NULL REFERENCES norwegian_explorer_app.users(id) ON DELETE CASCADE,
-    name text NOT NULL,
-    description text NOT NULL DEFAULT '',
-    waypoints jsonb NOT NULL,
-    geojson text NOT NULL,
-    length_meters double precision NOT NULL,
-    updated_at timestamptz NOT NULL DEFAULT now()
-  );
-  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS source_route_id text;
-  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS source_name text NOT NULL DEFAULT 'Bymarka';
-  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS smart_plan jsonb;
-  ALTER TABLE norwegian_explorer_app.custom_routes ADD COLUMN IF NOT EXISTS stops jsonb NOT NULL DEFAULT '[]'::jsonb;
-`)
-const appSchemaReady = appSchemaSetup.catch(async error => {
-  console.error('Kunne ikke klargjøre appens tabeller:', error.message)
-  const { rows } = await pool.query("SELECT to_regclass('norwegian_explorer_app.users') AS users")
-  if (!rows[0].users) throw error
-  const required=['sessions','favorites','user_routes','user_goals','custom_routes']
-  const result=await pool.query<{ready:boolean}>("SELECT bool_and(to_regclass('norwegian_explorer_app.' || name) IS NOT NULL) AS ready FROM unnest($1::text[]) name",[required])
-  if(!result.rows[0].ready)throw error
-  console.error('Tabellene finnes allerede, så backend fortsetter med dem som de er.')
-})
-// Kolonnen for «Mitt sted» kan mangle hvis den ikke er lagt til av eieren av tabellen ennå
-// (se server/sql/app/home_municipality.sql). Da virker alt annet, men stedsvalget er slått av.
-const hasHomeMunicipality = appSchemaReady.then(async () => {
-  const { rowCount } = await pool.query(`SELECT 1 FROM information_schema.columns
-    WHERE table_schema='norwegian_explorer_app' AND table_name='users' AND column_name='home_municipality'`)
-  if (!rowCount) console.error('Kolonnen users.home_municipality mangler. Kjør server/sql/app/home_municipality.sql for å slå på stedsvalg.')
-  return (rowCount||0)>0
-})
-/** Kolonneuttrykket for brukerens sted, eller NULL hvis kolonnen ikke finnes i databasen */
-async function homeColumn(prefix:string = '') {
-  return (await hasHomeMunicipality) ? `${prefix}home_municipality` : 'NULL AS home_municipality'
-}
-const routeCatalogReady = appSchemaReady.then(async () => {
-  const { rows } = await pool.query("SELECT to_regclass('norwegian_explorer_app.route_catalog') AS catalog")
-  if (!rows[0].catalog) throw new Error('Route catalog is missing. Run scripts/create-route-catalog.sql first.')
-})
-// Får ikke databasebrukeren lage tabellene over, skal bare innlogging og ruter feile, ikke hele serveren
-appSchemaReady.catch(error => console.error('Kunne ikke klargjøre appens tabeller:', error.message))
-routeCatalogReady.catch(error => console.error(error.message))
-hasHomeMunicipality.catch(()=>undefined)
-
-function validateEmail(email: string | null) {
-  const value = email?.trim().toLowerCase() || ''
-  if (value.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) throw new GraphQLError('Skriv inn en gyldig e-postadresse.')
-  return value
-}
-function validateCredentials(username:string, password:string) {
-  const normalized = username.trim()
-  if (!/^[\p{L}\p{N}_.-]{3,30}$/u.test(normalized)) throw new GraphQLError('Brukernavnet må være 3–30 tegn og kan inneholde bokstaver, tall, punktum, bindestrek og understrek.')
-  if (password.length < 10 || password.length > 200) throw new GraphQLError('Passordet må være minst 10 tegn.')
-  return normalized
-}
-async function passwordHash(password:string, salt:Buffer) { return Buffer.from(await scrypt(password, salt, 64)) }
-function tokenHash(token:string) { return createHash('sha256').update(token).digest() }
-async function createSession(client:Pool|PoolClient, userId:string) {
-  const token = randomBytes(32).toString('base64url')
-  await client.query("INSERT INTO norwegian_explorer_app.sessions(token_hash,user_id,expires_at) VALUES ($1,$2,now()+(30 * interval '1 day'))", [tokenHash(token), userId])
-  return token
-}
-async function userFromToken(token:string) {
-  if (!token || token.length > 200) return null
-  await appSchemaReady
-  const { rows } = await pool.query<AppUser>(`SELECT u.id,u.username,u.email,u.phone,u.avatar,${await homeColumn('u.')} FROM norwegian_explorer_app.sessions s
-    JOIN norwegian_explorer_app.users u ON u.id=s.user_id
-    WHERE s.token_hash=$1 AND s.expires_at>now()`, [tokenHash(token)])
-  return rows[0] || null
-}
-async function profileFor(user:AppUser) {
-  await routeCatalogReady
-  const { rows } = await pool.query(`SELECT coalesce(c.id,f.route_id) AS id,
-      coalesce(c.name,f.route_name) AS name,coalesce(c.number,f.route_number) AS number,
-      f.created_at::text AS "createdAt"
-    FROM norwegian_explorer_app.favorites f
-    LEFT JOIN norwegian_explorer_app.route_catalog c ON c.id=f.route_id
-    WHERE f.user_id=$1 ORDER BY f.created_at DESC`, [user.id])
-  const { rows: trips } = await pool.query(`
-    WITH routes AS (
-      SELECT id,length_meters FROM norwegian_explorer_app.route_catalog
-      UNION ALL SELECT id,length_meters FROM norwegian_explorer_app.route_loops
-    )
-    SELECT t.route_id AS id,t.route_name AS name,t.route_number AS number,t.status,
-      t.updated_at::text AS "updatedAt",r.length_meters AS "lengthMeters",
-      t.completed_on::text AS "completedOn",t.diary_note AS "diaryNote",t.rating
-    FROM norwegian_explorer_app.user_routes t LEFT JOIN routes r ON r.id=t.route_id
-    WHERE t.user_id=$1 ORDER BY t.updated_at DESC`, [user.id])
-  const { rows: counties } = await pool.query(`SELECT count(DISTINCT a.county_number)::int AS count
-    FROM norwegian_explorer_app.user_routes t JOIN norwegian_explorer_app.route_areas a ON a.route_id=t.route_id
-    WHERE t.user_id=$1 AND t.status='COMPLETED'`, [user.id])
-  const completed = trips.filter(trip => trip.status === 'COMPLETED')
-  const { rows: goals } = await pool.query('SELECT month,target FROM norwegian_explorer_app.user_goals WHERE user_id=$1 ORDER BY month DESC', [user.id])
-  return { username: user.username, email: user.email, phone: user.phone, avatar: user.avatar, homeMunicipality:await municipalityByCode(user.home_municipality), favorites: rows,
-    trips, goals, stats: { completedCount: completed.length, plannedCount: trips.length-completed.length,
-      totalLengthMeters: completed.reduce((sum,trip) => sum+(trip.lengthMeters || 0),0), countyCount: counties[0].count } }
-}
-// Kartutsnitt rundt turene i en kommune, slik at kartet på Utforsk kan starte der.
-// Vi har ikke kommunegrensene i databasen, så utsnittet regnes ut fra rutene som ligger i kommunen.
-// Svært lange ruter (over 30 km) strekker seg ofte langt ut av kommunen, så de tas bare med
-// hvis kommunen ikke har kortere ruter. Gir null hvis kommunen ikke har noen ruter.
-async function municipalityBbox(code:string) {
-  await routeCatalogReady
-  const { rows } = await pool.query(`
-    WITH routes AS (
-      SELECT c.geom, c.length_meters FROM norwegian_explorer_app.route_areas a
-      JOIN norwegian_explorer_app.route_catalog c ON c.id=a.route_id
-      WHERE a.municipality_number=$1
-    ), chosen AS (
-      SELECT geom FROM routes WHERE length_meters<=30000
-      UNION ALL SELECT geom FROM routes WHERE NOT EXISTS (SELECT 1 FROM routes WHERE length_meters<=30000)
-    ), extent AS (SELECT ST_Transform(ST_SetSRID(ST_Extent(geom)::geometry,25833),4326) AS box FROM chosen)
-    SELECT CASE WHEN box IS NULL THEN NULL ELSE ARRAY[ST_XMin(box),ST_YMin(box),ST_XMax(box),ST_YMax(box)]::float8[] END AS bbox FROM extent`, [code])
-  return rows[0]?.bbox ?? null
-}
-async function municipalityByCode(code:string|null) {
-  if (!code) return null
-  await routeCatalogReady
-  const { rows } = await pool.query(`SELECT municipality_number AS code,min(municipality_name) AS name
-    FROM norwegian_explorer_app.route_areas WHERE municipality_number=$1 GROUP BY municipality_number`, [code])
-  return rows[0] || null
-}
-async function requireUser(token:string) {
-  const user = await userFromToken(token)
-  if (!user) throw new GraphQLError('Du må logge inn.')
-  return user
-}
-// Filtre i routes som kan ha flere verdier. Innen ett filter er det «eller» (Enkel eller Middels),
-// for steder langs turen er det «og» (turen må ha både hytte og utsiktspunkt i nærheten).
-type RouteListArgs = { difficulty: string[] | null; routeType: string[] | null; facility: string[] | null; sort: RouteSort }
-type RouteSort = 'NAME' | 'SHORTEST' | 'LONGEST' | 'POPULAR'
-// ORDER BY for hver sortering. Teksten settes rett inn i SQL, men kommer bare fra denne lista (ikke fra brukeren).
-// key til slutt gjør rekkefølgen entydig, så pagineringen ikke hopper over eller gjentar turer.
-const ROUTE_SORT_ORDER: Record<RouteSort, string> = {
-  NAME: 'name, key',
-  SHORTEST: '"minLengthMeters", name, key',
-  LONGEST: '"maxLengthMeters" DESC, name, key',
-  POPULAR: '"favoriteCount" DESC, name, key',
-}
-const validFilterList = (list: string[] | null) => list == null || (list.length <= 12 && list.every(item => typeof item === 'string' && item.length <= 40))
+import { pool } from './db/db.ts'
+import { authResolvers, authTypeDefs } from './graphql/auth.ts'
+import { builderResolvers, builderTypeDefs } from './graphql/builder.ts'
+import { mountainResolvers, mountainTypeDefs } from './graphql/mountains.ts'
+import { profileResolvers, profileTypeDefs } from './graphql/profile.ts'
+import { routeResolvers, routeTypeDefs } from './graphql/routes.ts'
+import { requestSafety } from './lib/requestSafety.ts'
 
+// routeTypeDefs og authTypeDefs definerer Query og Mutation, og de andre modulene utvider dem med «extend»
 const schema = createSchema({
-  // Fjellområdene og turpunktene ligger i server/server.ts og legges til her
-  typeDefs: [`
-    type Route {
-      id: ID!
-      name: String!
-      number: String!
-      lengthMeters: Float!
-      segmentCount: Int!
-      connected: Boolean!
-      maintainer: String
-      difficulty: String
-      description: String
-      routeType: String
-      nameQuality: String!
-      duplicateCount: Int!
-      variantCount: Int!
-      geojson: String!
-    }
-    type RouteSummary { id: ID!, name: String!, number: String!, lengthMeters: Float!, difficulty: String, routeType: String, duplicateCount: Int!, variantCount: Int! }
-    "Sortering av turlister: navn, korteste/lengste først, eller flest favoritter først"
-    enum RouteSort { NAME SHORTEST LONGEST POPULAR }
-    type RouteGroup { key: String!, name: String!, variantCount: Int!, minLengthMeters: Float!, maxLengthMeters: Float!, favoriteCount: Int!, variants: [RouteSummary!]! }
-    type RoutePage { items: [RouteGroup!]!, total: Int! }
-    type PopularRoute { favoriteCount: Int!, route: RouteSummary! }
-    "Kommune. bbox er [vest, sør, øst, nord] i grader rundt turene i kommunen, brukes til å zoome kartet dit."
-    type Municipality { code: String!, name: String!, bbox: [Float!] }
-    type AreaOption { code: String!, name: String!, routeCount: Int! }
-    "Kommune fra søket. bbox som på Municipality, så kartet kan fly dit."
-    type MunicipalityHit { code: String!, name: String!, routeCount: Int!, bbox: [Float!] }
-    type AreaOptions { counties: [AreaOption!]!, municipalities: [AreaOption!]! }
-    type OsmPage { geojson: String!, truncated: Boolean! }
-    type Favorite { id: ID!, name: String!, number: String!, createdAt: String! }
-    enum TripStatus { PLANNED COMPLETED }
-    type UserTrip { id: ID!, name: String!, number: String!, status: TripStatus!, updatedAt: String!, lengthMeters: Float, completedOn: String, diaryNote: String, rating: Int }
-    type TripStats { completedCount: Int!, plannedCount: Int!, totalLengthMeters: Float!, countyCount: Int! }
-    type MonthlyGoal { month: String!, target: Int! }
-    input BuilderPointInput { lon: Float!, lat: Float! }
-    type BuilderPoint { lon: Float!, lat: Float! }
-    type BuilderPreview { geojson: String!, lengthMeters: Float!, waypoints: [BuilderPoint!]! }
-    input RoundTripInput { start: BuilderPointInput!, desiredLengthMeters: Float!, proposalId: ID! }
-    type RoundTripProposal { id: ID!, geojson: String!, lengthMeters: Float!, connectorMeters: Float!, differenceMeters: Float!, waypoints: [BuilderPoint!]! }
-    type ElevationPoint { distanceMeters: Float!, elevation: Float }
-    type ElevationProfile { points: [ElevationPoint!]!, lengthMeters: Float!, sampleIntervalMeters: Float!, ascentMeters: Float, descentMeters: Float, minElevation: Float, maxElevation: Float, complete: Boolean!, missingCount: Int!, source: String! }
-    type RouteStop { id: ID!, name: String, kind: String!, lon: Float!, lat: Float!, distanceFromRouteMeters: Float!, distanceFromStartMeters: Float!, operator: String, openingHours: String, capacity: String, fee: String, website: String }
-    type RouteStopPage { stops: [RouteStop!]!, truncated: Boolean! }
-    type CustomRoute { id: ID!, name: String!, description: String!, geojson: String!, lengthMeters: Float!, waypoints: [BuilderPoint!]!, updatedAt: String!, sourceRouteId: ID, sourceName: String!, smartPlan: String, stops: [RouteStop!]! }
-    type UserProfile { username: String!, email: String, phone: String, avatar: String, homeMunicipality: Municipality, favorites: [Favorite!]!, trips: [UserTrip!]!, goals: [MonthlyGoal!]!, stats: TripStats! }
-    type AuthPayload { token: String!, user: UserProfile! }
-    type Query {
-      osmNearby(west: Float!, south: Float!, east: Float!, north: Float!): OsmPage!
-      routes(search: String = "", minLength: Float, maxLength: Float, difficulty: [String!], routeType: [String!], county: String, municipality: String, facility: [String!], sort: RouteSort = NAME, west: Float, south: Float, east: Float, north: Float, offset: Int = 0, limit: Int = 12): RoutePage!
-      areas(county: String): AreaOptions!
-      route(name: String!, number: String!): Route
-      routeVariants(name: String!): [RouteSummary!]!
-      popularRoutes(limit: Int = 6): [PopularRoute!]!
-      searchMunicipalities(query: String!, limit: Int = 4): [MunicipalityHit!]!
-      exampleRoute: Route
-      me(token: String!): UserProfile
-      builderNetwork(token: String!, routeId: ID): String!
-      previewCustomRoute(token: String!, points: [BuilderPointInput!]!, routeId: ID): BuilderPreview!
-      myCustomRoutes(token: String!): [CustomRoute!]!
-      suggestRoundTrips(token: String!, start: BuilderPointInput!, desiredLengthMeters: Float!, routeId: ID): [RoundTripProposal!]!
-      elevationProfile(token: String!, geojson: String!): ElevationProfile!
-      routeStops(token: String!, geojson: String!): RouteStopPage!
-    }
-    type Mutation {
-      register(username: String!, password: String!, email: String!): AuthPayload!
-      requestPasswordReset(email: String!): Boolean!
-      resetPassword(token: String!, newPassword: String!): Boolean!
-      login(username: String!, password: String!): AuthPayload!
-      logout(token: String!): Boolean!
-      toggleFavorite(token: String!, routeId: ID!): UserProfile!
-      setHomeMunicipality(token: String!, code: String): UserProfile!
-      updateProfile(token: String!, email: String, phone: String, avatar: String): UserProfile!
-      setTripStatus(token: String!, routeId: ID!, status: TripStatus): UserProfile!
-      saveTripDiary(token: String!, routeId: ID!, completedOn: String, diaryNote: String, rating: Int): UserProfile!
-      setMonthlyGoal(token: String!, month: String!, target: Int): UserProfile!
-      changePassword(token: String!, currentPassword: String!, newPassword: String!): Boolean!
-      saveCustomRoute(token: String!, id: ID, name: String!, description: String!, points: [BuilderPointInput!]!, routeId: ID, roundTrip: RoundTripInput, stopIds: [ID!] = []): CustomRoute!
-      deleteCustomRoute(token: String!, id: ID!): Boolean!
-    }
-  `, mountainTypeDefs],
-  resolvers: [{ Query: {
-    routeStops: async (_:unknown, {token,geojson}:ApiArgs) => {await requireUser(token);return routeStops(geojson)},
-    elevationProfile: async (_:unknown, {token,geojson}:ApiArgs) => {await requireUser(token);return elevationProfile(geojson)},
-    suggestRoundTrips: async (_:unknown, {token,start,desiredLengthMeters,routeId}:ApiArgs) => {await requireUser(token);return suggestRoundTrips(start,desiredLengthMeters,routeId)},
-    builderNetwork: async (_:unknown, { token, routeId }:ApiArgs) => { await requireUser(token); return (await builderNetwork(routeId)).geojson },
-    previewCustomRoute: async (_:unknown, { token, points, routeId }:ApiArgs) => { await requireUser(token); return planCustomRoute(points,routeId) },
-    myCustomRoutes: async (_:unknown, { token }:ApiArgs) => {
-      const user=await requireUser(token)
-      const { rows }=await pool.query('SELECT id,name,description,geojson,length_meters AS "lengthMeters",waypoints,updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops FROM norwegian_explorer_app.custom_routes WHERE user_id=$1 ORDER BY updated_at DESC',[user.id])
-      return rows
-    },
-    osmNearby: async (_:unknown, { west, south, east, north }:ApiArgs) => {
-      if (![west,south,east,north].every(Number.isFinite) || west < -180 || east > 180 || south < -90 || north > 90 || west >= east || south >= north || east-west > 0.5 || north-south > 0.5) throw new GraphQLError('Velg et mindre kartområde for OSM-data.')
-      const { rows } = await pool.query(`
-        SELECT osm_type,osm_id::text,name,category,
-          coalesce(tags->>'amenity',tags->>'tourism',tags->>'natural',tags->>'highway') AS kind,
-          ST_AsGeoJSON(CASE WHEN category='place' THEN ST_PointOnSurface(geom)
-            ELSE ST_SimplifyPreserveTopology(geom,0.00001) END)::json AS geometry
-        FROM osm_import.objects
-        WHERE category IN ('trail','place')
-          AND geom && ST_MakeEnvelope($1,$2,$3,$4,4326)
-          AND ST_Intersects(geom,ST_MakeEnvelope($1,$2,$3,$4,4326))
-          AND coalesce(tags->>'access','') NOT IN ('no','private')
-          AND coalesce(tags->>'foot','') NOT IN ('no','private')
-          AND (category='place' OR GeometryType(geom) IN ('LINESTRING','MULTILINESTRING'))
-        ORDER BY category,osm_type,osm_id LIMIT 1001`, [west,south,east,north])
-      return { truncated: rows.length>1000, geojson: JSON.stringify({ type:'FeatureCollection', features: rows.slice(0,1000).map(r => ({ type:'Feature', geometry:r.geometry, properties:{ id:r.osm_type+'/'+r.osm_id, name:r.name, category:r.category, kind:r.kind } })) }) }
-    },
-    areas: async (_:unknown, { county }:ApiArgs) => {
-      await routeCatalogReady
-      const [countyResult, municipalityResult] = await Promise.all([
-        pool.query(`SELECT county_number AS code,min(county_name) AS name,count(DISTINCT route_id)::int AS "routeCount"
-          FROM norwegian_explorer_app.route_areas GROUP BY county_number ORDER BY name`),
-        pool.query(`SELECT municipality_number AS code,min(municipality_name) AS name,count(DISTINCT route_id)::int AS "routeCount"
-          FROM norwegian_explorer_app.route_areas WHERE ($1::text IS NULL OR county_number=$1)
-          GROUP BY municipality_number ORDER BY name`, [county || null]),
-      ])
-      return { counties: countyResult.rows, municipalities: municipalityResult.rows }
-    },
-    routes: async (_:unknown, args:ApiArgs) => {
-      const { search, minLength, maxLength, county, municipality, west, south, east, north, offset, limit } = args
-      const { difficulty, routeType, facility, sort } = args as unknown as RouteListArgs
-      if (![difficulty, routeType, facility].every(validFilterList) || !Object.hasOwn(ROUTE_SORT_ORDER, sort)) throw new GraphQLError('Ugyldig filter eller sortering.')
-      await routeCatalogReady
-      const bounds = [west,south,east,north]
-      const hasBounds = bounds.every(Number.isFinite)
-      if (search == null || search.length > 120 || !Number.isInteger(offset) || offset < 0 || offset > 100000 || !Number.isInteger(limit) || limit < 1 || limit > 30 ||
-          (minLength != null && (!Number.isFinite(minLength) || minLength < 0)) || (maxLength != null && (!Number.isFinite(maxLength) || maxLength < 0)) ||
-          (minLength != null && maxLength != null && minLength > maxLength) ||
-          (bounds.some(value => value != null) && !hasBounds) || (hasBounds && (west < -180 || east > 180 || south < -90 || north > 90 || west >= east || south >= north))) {
-        throw new GraphQLError('Ugyldig søk eller sidestørrelse.')
-      }
-      // Turer nær alle valgte steder: snittet av id-listene for hver stedstype (listene er mellomlagret i routeStops.ts)
-      let facilityIds: string[] | null = null
-      for (const item of new Set(facility ?? [])) {
-        const ids = new Set(await nearbyFacilityRouteIds(item) ?? [])
-        facilityIds = facilityIds ? facilityIds.filter(id => ids.has(id)) : [...ids]
-      }
-      const { rows } = await pool.query(`
-        WITH favorite_counts AS (
-          SELECT route_id, count(*)::int AS n FROM norwegian_explorer_app.favorites WHERE route_id IS NOT NULL GROUP BY route_id
-        ), base AS (
-          SELECT c.id,c.name,c.number,c.length_meters,c.difficulty,c.route_type,c.geom,
-            d.duplicate_count AS "duplicateCount"
-          FROM norwegian_explorer_app.route_catalog c
-          JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
-          WHERE c.name_quality <> 'suspect'
-            AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
-          UNION ALL
-          SELECT l.id,l.name,l.number,l.length_meters,NULL,CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END,l.geom,1
-          FROM norwegian_explorer_app.route_loops l
-        ), canonical AS (
-          SELECT base.*,count(*) OVER (PARTITION BY lower(name))::int AS "variantCount"
-          FROM base
-        ), matches AS (
-          SELECT id,name,number,length_meters AS "lengthMeters",difficulty,route_type AS "routeType",
-            "duplicateCount","variantCount"
-          FROM canonical
-          WHERE true
-            AND strpos(lower(name),lower($1)) > 0
-            AND ($14::text[] IS NULL OR id=ANY($14))
-            AND ($2::float8 IS NULL OR length_meters >= $2 * 1000)
-            AND ($3::float8 IS NULL OR length_meters <= $3 * 1000)
-            AND ($8::text[] IS NULL OR string_to_array(coalesce(difficulty,'Ikke gradert'), ', ') && $8::text[])
-            AND ($9::text[] IS NULL OR string_to_array(coalesce(route_type,'Ikke oppgitt'), ', ') && $9::text[])
-            AND ($10::text IS NULL OR EXISTS (SELECT 1 FROM norwegian_explorer_app.route_areas a WHERE a.route_id=canonical.id AND a.county_number=$10))
-            AND ($11::text IS NULL OR EXISTS (SELECT 1 FROM norwegian_explorer_app.route_areas a WHERE a.route_id=canonical.id AND a.municipality_number=$11))
-            AND ($4::float8 IS NULL OR (
-              geom && ST_Transform(ST_MakeEnvelope($4,$5,$6,$7,4326),25833)
-              AND ST_Intersects(geom,ST_Transform(ST_MakeEnvelope($4,$5,$6,$7,4326),25833))))
-        ), grouped AS (
-          SELECT lower(name) AS key,min(name) AS name,count(*)::int AS "variantCount",
-            min("lengthMeters") AS "minLengthMeters",max("lengthMeters") AS "maxLengthMeters",
-            coalesce(sum(fc.n),0)::int AS "favoriteCount",
-            json_agg(json_build_object(
-              'id',id,'name',name,'number',number,'lengthMeters',"lengthMeters",
-              'difficulty',difficulty,'routeType',"routeType",'duplicateCount',"duplicateCount",
-              'variantCount',"variantCount") ORDER BY "lengthMeters",number) AS variants
-          FROM matches LEFT JOIN favorite_counts fc ON fc.route_id=matches.id GROUP BY lower(name)
-        ), page AS (
-          SELECT *, row_number() OVER (ORDER BY ${ROUTE_SORT_ORDER[sort]}) AS position
-          FROM grouped ORDER BY ${ROUTE_SORT_ORDER[sort]} LIMIT $12 OFFSET $13
-        )
-        SELECT (SELECT count(*)::int FROM grouped) AS total,
-          coalesce((SELECT json_agg(page ORDER BY position) FROM page),'[]'::json) AS items
-      `, [search.trim(), minLength ?? null, maxLength ?? null, hasBounds ? west : null, hasBounds ? south : null, hasBounds ? east : null, hasBounds ? north : null, difficulty?.length ? difficulty : null, routeType?.length ? routeType : null, county || null, municipality || null, limit, offset,facilityIds])
-      return rows[0]
-    },
-      popularRoutes: async (_:unknown, { limit }:ApiArgs) => {
-        if (!Number.isInteger(limit) || limit < 1 || limit > 30) throw new GraphQLError('Ugyldig antall.')
-        await routeCatalogReady
-        // Én rad per rutenavn (den mest lagrede varianten). Har få turer favoritter ennå, fylles lista opp
-        // med graderte turer som har beskrivelse, deretter turer som er registrert flere ganger i Kartverkets data.
-        const { rows } = await pool.query(`
-          WITH favorite_counts AS (
-            SELECT route_id, count(*)::int AS n FROM norwegian_explorer_app.favorites
-            WHERE route_id IS NOT NULL GROUP BY route_id
-          ), candidates AS (
-            SELECT DISTINCT ON (lower(c.name))
-              c.id, c.name, c.number, c.length_meters, c.difficulty, c.route_type, c.description,
-              d.duplicate_count, coalesce(f.n, 0) AS favorite_count
-            FROM norwegian_explorer_app.route_catalog c
-            JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
-            LEFT JOIN favorite_counts f ON f.route_id=c.id
-            WHERE c.name_quality <> 'suspect' AND c.length_meters >= 1000
-              AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
-            ORDER BY lower(c.name), coalesce(f.n, 0) DESC, d.duplicate_count DESC, c.length_meters
-          )
-          SELECT favorite_count AS "favoriteCount", json_build_object(
-              'id', id, 'name', name, 'number', number, 'lengthMeters', length_meters,
-              'difficulty', difficulty, 'routeType', route_type, 'duplicateCount', duplicate_count, 'variantCount', 1
-            ) AS route
-          FROM candidates
-          ORDER BY favorite_count DESC, (difficulty IS NOT NULL AND description IS NOT NULL) DESC,
-            duplicate_count DESC, name
-          LIMIT $1`, [limit])
-        return rows
-      },
-      searchMunicipalities: async (_:unknown, { query, limit }:ApiArgs) => {
-        const search = query.trim()
-        if (!search || search.length > 120 || !Number.isInteger(limit) || limit < 1 || limit > 20) throw new GraphQLError('Ugyldig søk.')
-        await routeCatalogReady
-        // Navn som starter med søketeksten kommer først, deretter kommunene med flest turer
-        const { rows } = await pool.query(`
-          SELECT municipality_number AS code, min(municipality_name) AS name, count(DISTINCT route_id)::int AS "routeCount"
-          FROM norwegian_explorer_app.route_areas
-          WHERE strpos(lower(municipality_name), lower($1)) > 0
-          GROUP BY municipality_number
-          ORDER BY bool_or(lower(municipality_name) LIKE lower($1) || '%') DESC, "routeCount" DESC, name
-          LIMIT $2`, [search, limit])
-        return rows
-      },
-    exampleRoute: () => loadRoute('Romsdalseggen', 'F_20140827_2'),
-    route: (_, { name, number }) => {
-      if (!name.trim() || name.length > 500 || !number.trim() || number.length > 500) throw new GraphQLError('Ugyldig rute.')
-      return loadRoute(name, number)
-    },
-    routeVariants: async (_:unknown, { name }:ApiArgs) => {
-      if (!name.trim() || name.length > 500) throw new GraphQLError('Ugyldig rutenavn.')
-      await routeCatalogReady
-      const { rows } = await pool.query(`
-        WITH variants AS (
-          SELECT c.id,c.name,c.number,c.length_meters,c.difficulty,c.route_type,
-            d.duplicate_count AS "duplicateCount"
-          FROM norwegian_explorer_app.route_catalog c
-          JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id AND d.canonical_id=c.id
-          WHERE lower(c.name)=lower($1) AND c.name_quality<>'suspect'
-            AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
-          UNION ALL
-          SELECT l.id,l.name,l.number,l.length_meters,NULL,CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END,1
-          FROM norwegian_explorer_app.route_loops l WHERE lower(l.name)=lower($1)
-        )
-        SELECT id,name,number,length_meters AS "lengthMeters",difficulty,
-          route_type AS "routeType","duplicateCount",count(*) OVER ()::int AS "variantCount"
-        FROM variants ORDER BY CASE WHEN number='SAMLET_RUNDE' THEN 0 ELSE 1 END,length_meters,number`, [name.trim()])
-      return rows
-    },
-    me: async (_:unknown, { token }:ApiArgs) => {
-      const user = await userFromToken(token)
-      return user ? profileFor(user) : null
-    },
-  }, Mutation: {
-    register: async (_:unknown, { username, password, email }:ApiArgs) => {
-      await appSchemaReady
-      checkAuthAttempt(username)
-      const cleanUsername = validateCredentials(username, password)
-      const cleanEmail = validateEmail(email)
-      const salt = randomBytes(16)
-      const hash = await passwordHash(password, salt)
-      const client = await pool.connect()
-      try {
-        await client.query('BEGIN')
-        const { rows } = await client.query(`INSERT INTO norwegian_explorer_app.users(username,password_hash,password_salt,email)
-          VALUES ($1,$2,$3,$4) RETURNING id,username,email`, [cleanUsername, hash, salt, cleanEmail])
-        const token = await createSession(client, rows[0].id)
-        await client.query('COMMIT')
-        return { token, user: { username: rows[0].username, email: cleanEmail, homeMunicipality:null, favorites: [], trips: [], goals: [],
-          stats: { completedCount: 0, plannedCount: 0, totalLengthMeters: 0, countyCount: 0 } } }
-      } catch (error) {
-        await client.query('ROLLBACK')
-        if (error && typeof error==='object' && 'code' in error && error.code === '23505') throw new GraphQLError('Brukernavnet er allerede i bruk.')
-        throw error
-      } finally { client.release() }
-    },
-    requestPasswordReset: async (_:unknown, { email }:ApiArgs) => {
-      await appSchemaReady
-      const cleanEmail = validateEmail(email)
-      checkAuthAttempt(`reset:${cleanEmail}`)
-      if (!resetDeliveryAvailable()) throw new GraphQLError('Passordtilbakestilling er ikke tilgjengelig ennå. Kontakt prosjektgruppen.')
-      const {rows} = await pool.query<{id:string}>('SELECT id FROM norwegian_explorer_app.users WHERE lower(email)=$1', [cleanEmail])
-      for (const user of rows) {
-        const resetToken = randomBytes(32).toString('base64url')
-        await pool.query("INSERT INTO norwegian_explorer_app.password_resets(token_hash,user_id,expires_at) VALUES ($1,$2,now()+interval '30 minutes')", [tokenHash(resetToken), user.id])
-        try { await sendPasswordReset(cleanEmail, resetToken) }
-        catch { await pool.query('DELETE FROM norwegian_explorer_app.password_resets WHERE token_hash=$1',[tokenHash(resetToken)]); throw new GraphQLError('Kunne ikke sende e-post akkurat nå. Prøv igjen senere.') }
-      }
-      await pool.query('DELETE FROM norwegian_explorer_app.password_resets WHERE expires_at<=now()')
-      return true
-    },
-    resetPassword: async (_:unknown, {token, newPassword}:ApiArgs) => {
-      await appSchemaReady
-      checkAuthAttempt('password-reset')
-      if (!/^[A-Za-z0-9_-]{43}$/.test(token)) throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
-      if (newPassword.length<10 || newPassword.length>200) throw new GraphQLError('Passordet må være mellom 10 og 200 tegn.')
-      const client = await pool.connect()
-      try {
-        await client.query('BEGIN')
-        const {rows} = await client.query<{user_id:string}>('SELECT user_id FROM norwegian_explorer_app.password_resets WHERE token_hash=$1 AND expires_at>now()', [tokenHash(token)])
-        if (!rows.length) throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
-        const userId = rows[0].user_id
-        await client.query('SELECT id FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE',[userId])
-        const valid = await client.query('SELECT 1 FROM norwegian_explorer_app.password_resets WHERE token_hash=$1 AND expires_at>now()', [tokenHash(token)])
-        if (!valid.rowCount) throw new GraphQLError('Lenken er ugyldig eller utløpt. Be om en ny lenke.')
-        const salt = randomBytes(16)
-        await client.query('UPDATE norwegian_explorer_app.users SET password_hash=$2,password_salt=$3 WHERE id=$1',[userId,await passwordHash(newPassword,salt),salt])
-        await client.query('DELETE FROM norwegian_explorer_app.sessions WHERE user_id=$1',[userId])
-        await client.query('DELETE FROM norwegian_explorer_app.password_resets WHERE user_id=$1',[userId])
-        await client.query('COMMIT')
-        return true
-      } catch(error) { await client.query('ROLLBACK'); throw error }
-      finally { client.release() }
-    },
-    login: async (_:unknown, { username, password }:ApiArgs) => {
-      checkAuthAttempt(username)
-      if(username.length>100 || password.length>200)throw new GraphQLError('Feil brukernavn eller passord.')
-      await appSchemaReady
-      const client=await pool.connect()
-      let user:AuthUser,token:string
-      try{
-        await client.query('BEGIN')
-        const {rows}=await client.query<AuthUser>(`SELECT id,username,email,phone,avatar,${await homeColumn()},password_hash,password_salt FROM norwegian_explorer_app.users WHERE lower(username)=lower($1) FOR UPDATE`,[username.trim()])
-        user=rows[0]
-        const candidate=await passwordHash(password,user?.password_salt || Buffer.alloc(16))
-        if(!user || candidate.length!==user.password_hash.length || !timingSafeEqual(candidate,user.password_hash))throw new GraphQLError('Feil brukernavn eller passord.')
-        token=await createSession(client,user.id)
-        await client.query('COMMIT')
-      }catch(error){await client.query('ROLLBACK');throw error}finally{client.release()}
-      return {token,user:await profileFor(user)}
-    },
-    logout: async (_:unknown, { token }:ApiArgs) => {
-      await appSchemaReady
-      await pool.query('DELETE FROM norwegian_explorer_app.sessions WHERE token_hash=$1', [tokenHash(token)])
-      return true
-    },
-    toggleFavorite: async (_:unknown, { token, routeId }:ApiArgs) => {
-      if (!routeId || !/^[a-f0-9]{32}$/.test(routeId)) throw new GraphQLError('Ugyldig rute.')
-      const user = await requireUser(token)
-      await routeCatalogReady
-      const routeResult = await pool.query(`SELECT name,number FROM norwegian_explorer_app.route_catalog WHERE id=$1
-        UNION ALL SELECT name,number FROM norwegian_explorer_app.route_loops WHERE id=$1`, [routeId])
-      if (!routeResult.rows[0]) throw new GraphQLError('Ruten finnes ikke.')
-      const client=await pool.connect()
-      try{
-        await client.query('BEGIN')
-        await client.query('SELECT id FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE',[user.id])
-        const removed=await client.query('DELETE FROM norwegian_explorer_app.favorites WHERE user_id=$1 AND route_id=$2 RETURNING 1',[user.id,routeId])
-        if(!removed.rowCount)await client.query('INSERT INTO norwegian_explorer_app.favorites(user_id,route_id,route_name,route_number) VALUES($1,$2,$3,$4)',[user.id,routeId,routeResult.rows[0].name,routeResult.rows[0].number])
-        await client.query('COMMIT')
-      }catch(error){await client.query('ROLLBACK');throw error}finally{client.release()}
-      return profileFor(user)
-    },
-    saveCustomRoute: async (_:unknown, { token, id, name, description, points, routeId, roundTrip, stopIds }:ApiArgs) => {
-      const user=await requireUser(token)
-      if (!name.trim() || name.trim().length>100 || description.length>2000) throw new GraphQLError('Gi ruten et navn på maks 100 tegn og en beskrivelse på maks 2000 tegn.')
-      if (id && !/^[a-f0-9]{32}$/.test(id)) throw new GraphQLError('Ugyldig rute.')
-      const preview=roundTrip ? (await suggestRoundTrips(roundTrip.start,roundTrip.desiredLengthMeters,routeId)).find(item=>item.id===roundTrip.proposalId) : await planCustomRoute(points,routeId)
-      if(!preview)throw new GraphQLError('Rundturforslaget er ikke lenger tilgjengelig. Beregn nye forslag.')
-      const stops=(await routeStops(preview.geojson,stopIds || [])).stops
-      const customId=id || randomBytes(16).toString('hex')
-      const query=id ? `UPDATE norwegian_explorer_app.custom_routes SET name=$3,description=$4,waypoints=$5,geojson=$6,length_meters=$7,source_route_id=$8,source_name=$9,smart_plan=$10,stops=$11,updated_at=now() WHERE id=$1 AND user_id=$2 RETURNING id,name,description,waypoints,geojson,length_meters AS "lengthMeters",updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops` :
-        `INSERT INTO norwegian_explorer_app.custom_routes(id,user_id,name,description,waypoints,geojson,length_meters,source_route_id,source_name,smart_plan,stops) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11) RETURNING id,name,description,waypoints,geojson,length_meters AS "lengthMeters",updated_at::text AS "updatedAt",source_route_id AS "sourceRouteId",source_name AS "sourceName",smart_plan::text AS "smartPlan",stops`
-      const { rows }=await pool.query(query,[customId,user.id,name.trim(),description.trim(),JSON.stringify(preview.waypoints),preview.geojson,preview.lengthMeters,preview.sourceRouteId,preview.sourceName,roundTrip ? JSON.stringify(roundTrip) : null,JSON.stringify(stops)])
-      if (!rows[0]) throw new GraphQLError('Ruten finnes ikke på profilen din.')
-      return rows[0]
-    },
-    deleteCustomRoute: async (_:unknown, { token, id }:ApiArgs) => {
-      const user=await requireUser(token)
-      const result=await pool.query('DELETE FROM norwegian_explorer_app.custom_routes WHERE id=$1 AND user_id=$2',[id,user.id])
-      return (result.rowCount||0)>0
-    },
-    changePassword: async (_:unknown, { token, currentPassword, newPassword }:ApiArgs) => {
-      const user = await requireUser(token)
-      checkAuthAttempt(user.username)
-      if (currentPassword.length > 200) throw new GraphQLError('Gjeldende passord er feil.')
-      validateCredentials(user.username, newPassword)
-      if (currentPassword === newPassword) throw new GraphQLError('Velg et annet passord enn det du bruker nå.')
-      const client = await pool.connect()
-      try {
-        await client.query('BEGIN')
-        const { rows } = await client.query('SELECT password_hash,password_salt FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE', [user.id])
-        const stored = rows[0]
-        if (!stored) throw new GraphQLError('Du må logge inn på nytt.')
-        const candidate = await passwordHash(currentPassword, stored.password_salt)
-        if (!timingSafeEqual(candidate, stored.password_hash)) throw new GraphQLError('Gjeldende passord er feil.')
-        const salt = randomBytes(16)
-        const hash = await passwordHash(newPassword, salt)
-        await client.query('UPDATE norwegian_explorer_app.users SET password_hash=$2,password_salt=$3 WHERE id=$1', [user.id,hash,salt])
-        await client.query('DELETE FROM norwegian_explorer_app.sessions WHERE user_id=$1', [user.id])
-        await client.query('DELETE FROM norwegian_explorer_app.password_resets WHERE user_id=$1', [user.id])
-        await client.query('COMMIT')
-        return true
-      } catch (error) {
-        await client.query('ROLLBACK')
-        throw error
-      } finally { client.release() }
-    },
-    setMonthlyGoal: async (_:unknown, { token, month, target }:ApiArgs) => {
-      const user = await requireUser(token)
-      if (!/^[0-9]{4}-(0[1-9]|1[0-2])$/.test(month)) throw new GraphQLError('Velg en gyldig måned.')
-      if (target == null) {
-        await pool.query('DELETE FROM norwegian_explorer_app.user_goals WHERE user_id=$1 AND month=$2', [user.id,month])
-      } else {
-        if (!Number.isInteger(target) || target < 1 || target > 1000) throw new GraphQLError('Målet må være mellom 1 og 1000 turer.')
-        await pool.query(`INSERT INTO norwegian_explorer_app.user_goals(user_id,month,target) VALUES ($1,$2,$3)
-          ON CONFLICT (user_id,month) DO UPDATE SET target=excluded.target`, [user.id,month,target])
-      }
-      return profileFor(user)
-    },
-    saveTripDiary: async (_:unknown, { token, routeId, completedOn, diaryNote, rating }:ApiArgs) => {
-      const user = await requireUser(token)
-      if (!routeId || !/^[a-f0-9]{32}$/.test(routeId)) throw new GraphQLError('Ugyldig rute.')
-      const date = completedOn || null
-      if (date && (!/^\d{4}-\d{2}-\d{2}$/.test(date) || !Number.isFinite(Date.parse(date)) || new Date(date).toISOString().slice(0,10) !== date)) throw new GraphQLError('Skriv inn en gyldig dato.')
-      if (diaryNote && diaryNote.length > 2000) throw new GraphQLError('Notatet kan være maks 2000 tegn.')
-      if (rating != null && (!Number.isInteger(rating) || rating < 1 || rating > 5)) throw new GraphQLError('Vurderingen må være mellom 1 og 5.')
-      const result = await pool.query(`UPDATE norwegian_explorer_app.user_routes
-        SET completed_on=$3,diary_note=$4,rating=$5,updated_at=now()
-        WHERE user_id=$1 AND route_id=$2 AND status='COMPLETED' RETURNING route_id`,
-        [user.id,routeId,date,diaryNote?.trim() || null,rating ?? null])
-      if (!result.rowCount) throw new GraphQLError('Marker turen som gjennomført før du skriver i dagboken.')
-      return profileFor(user)
-    },
-    setTripStatus: async (_:unknown, { token, routeId, status }:ApiArgs) => {
-      const user = await requireUser(token)
-      if (!routeId || !/^[a-f0-9]{32}$/.test(routeId)) throw new GraphQLError('Ugyldig rute.')
-      if (status == null) {
-        await pool.query('DELETE FROM norwegian_explorer_app.user_routes WHERE user_id=$1 AND route_id=$2', [user.id,routeId])
-      } else {
-        await routeCatalogReady
-        const { rows } = await pool.query(`SELECT name,number FROM norwegian_explorer_app.route_catalog WHERE id=$1
-          UNION ALL SELECT name,number FROM norwegian_explorer_app.route_loops WHERE id=$1`, [routeId])
-        if (!rows[0]) throw new GraphQLError('Ruten finnes ikke.')
-        await pool.query(`INSERT INTO norwegian_explorer_app.user_routes(user_id,route_id,route_name,route_number,status)
-          VALUES ($1,$2,$3,$4,$5) ON CONFLICT (user_id,route_id) DO UPDATE SET status=excluded.status,updated_at=now()`,
-          [user.id,routeId,rows[0].name,rows[0].number,status])
-      }
-      return profileFor(user)
-    },
-      setHomeMunicipality: async (_:unknown, { token, code }:ApiArgs) => {
-        const user = await requireUser(token)
-        const cleanCode = code?.trim() || null
-        // Godta bare kommuner som faktisk finnes i rutedataene
-        if (cleanCode && !(await municipalityByCode(cleanCode))) throw new GraphQLError('Ukjent kommune.')
-        if (!(await hasHomeMunicipality)) throw new GraphQLError('Stedsvalg er ikke slått på i databasen ennå.')
-        const { rows } = await pool.query(`UPDATE norwegian_explorer_app.users SET home_municipality=$2
-        WHERE id=$1 RETURNING id,username,email,phone,avatar,home_municipality`, [user.id, cleanCode])
-        return profileFor(rows[0])
-      },
-    updateProfile: async (_:unknown, { token, email, phone, avatar }:ApiArgs) => {
-      const user = await requireUser(token)
-      const cleanEmail = validateEmail(email)
-      const cleanPhone = phone?.trim() || null
-      const cleanAvatar = avatar?.trim() || null
-      if(cleanEmail && cleanEmail.length>254)throw new GraphQLError('E-postadressen er for lang.')
-      if (cleanEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(cleanEmail)) throw new GraphQLError('Skriv inn en gyldig e-postadresse.')
-      if (cleanPhone && !/^\+?[0-9 ()-]{6,20}$/.test(cleanPhone)) throw new GraphQLError('Skriv inn et gyldig telefonnummer.')
-      if (cleanAvatar && (!/^data:image\/(png|jpeg|webp|gif);base64,[A-Za-z0-9+/]+={0,2}$/.test(cleanAvatar) || cleanAvatar.length > 600000)) throw new GraphQLError('Profilbildet må være et bilde på under 450 KB.')
-      const client = await pool.connect()
-      let updated: AppUser
-      try {
-        await client.query('BEGIN')
-        const {rows} = await client.query<AppUser>('SELECT id, email FROM norwegian_explorer_app.users WHERE id=$1 FOR UPDATE',[user.id])
-        if (rows[0].email?.toLowerCase() !== cleanEmail) await client.query('DELETE FROM norwegian_explorer_app.password_resets WHERE user_id=$1',[user.id])
-        const result = await client.query<AppUser>(`UPDATE norwegian_explorer_app.users
-          SET email=$2,phone=$3,avatar=$4 WHERE id=$1 RETURNING id,username,email,phone,avatar,${await homeColumn()}`,
-          [user.id, cleanEmail, cleanPhone, cleanAvatar])
-        updated = result.rows[0]
-        await client.query('COMMIT')
-      } catch(error) { await client.query('ROLLBACK'); throw error }
-      finally { client.release() }
-      return profileFor(updated)
-    },
-  }, Municipality: {
-    // Regnes bare ut når klienten ber om feltet
-    bbox: ({ code }:{ code:string }) => municipalityBbox(code),
-  }, MunicipalityHit: {
-    bbox: ({ code }:{ code:string }) => municipalityBbox(code),
-  } }, mountainResolvers],
+  typeDefs: [routeTypeDefs, authTypeDefs, profileTypeDefs, builderTypeDefs, mountainTypeDefs],
+  resolvers: [routeResolvers, authResolvers, profileResolvers, builderResolvers, mountainResolvers],
+})
+const yoga = createYoga({
+  schema,
+  plugins: [requestSafety],
+  batching: false,
+  cors: false,
+  graphiql: process.env.NODE_ENV !== 'production',
 })
-async function loadRoute(name:string, number:string) {
-    await routeCatalogReady
-    const { rows } = await pool.query(`
-      SELECT id,name,number,segment_count AS "segmentCount",length_meters AS "lengthMeters",
-        connected,maintainer,difficulty,route_type AS "routeType",description,
-        name_quality AS "nameQuality",d.duplicate_count AS "duplicateCount",
-        (SELECT count(*)::int FROM norwegian_explorer_app.route_catalog c2
-          JOIN norwegian_explorer_app.route_duplicate_map d2 ON d2.route_id=c2.id AND d2.canonical_id=c2.id
-          WHERE lower(c2.name)=lower(c.name)) AS "variantCount",
-        ST_AsGeoJSON(ST_Transform(geom,4326)) AS geojson
-      FROM norwegian_explorer_app.route_catalog c
-      JOIN norwegian_explorer_app.route_duplicate_map d ON d.route_id=c.id
-      WHERE name=$1 AND number=$2
-        AND NOT EXISTS (SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=c.id)
-      UNION ALL
-      SELECT l.id,l.name,l.number,l.source_variant_count AS "segmentCount",l.length_meters AS "lengthMeters",
-        true AS connected,'Avledet fra registrerte rutevarianter' AS maintainer,NULL AS difficulty,
-        CASE WHEN l.number LIKE 'STREKNING_%' THEN 'Avledet strekning' ELSE 'Avledet rundtur' END AS "routeType",
-        'Dette rutevalget er beregnet fra registrerte stier. Ingen forbindelser over datagap er lagt til. Rutevalget er ikke et offisielt turforslag.' AS description,
-        'derived' AS "nameQuality",1 AS "duplicateCount",
-        (SELECT count(*)::int + 1 FROM norwegian_explorer_app.route_catalog c2
-          JOIN norwegian_explorer_app.route_duplicate_map d2 ON d2.route_id=c2.id AND d2.canonical_id=c2.id
-          WHERE lower(c2.name)=lower(l.name)) AS "variantCount",
-        ST_AsGeoJSON(ST_Transform(l.geom,4326)) AS geojson
-      FROM norwegian_explorer_app.route_loops l WHERE l.name=$1 AND l.number=$2`, [name.trim(), number.trim()])
-    return rows[0] || null
-}
-const yoga = createYoga({ schema, plugins:[requestSafety], batching:false, cors: false, graphiql: process.env.NODE_ENV !== 'production' })
 const server = createServer(yoga)
 const port = Number(process.env.PORT || 4000)
 server.listen(port, '127.0.0.1', () => console.log(`GraphQL: http://127.0.0.1:${port}/graphql`))
 for (const signal of ['SIGINT', 'SIGTERM']) {
-  process.on(signal, () => server.close(async () => { await pool.end(); process.exit(0) }))
+  process.on(signal, () =>
+    server.close(async () => {
+      await pool.end()
+      process.exit(0)
+    }),
+  )
 }
diff --git a/server/lib/auth.ts b/server/lib/auth.ts
new file mode 100644
index 0000000..bf4a667
--- /dev/null
+++ b/server/lib/auth.ts
@@ -0,0 +1,91 @@
+// Innlogging: validering, passordhasjing, sesjoner og oppslag av bruker fra token.
+import { createHash, randomBytes, scrypt as scryptCallback } from 'node:crypto'
+import { promisify } from 'node:util'
+import { GraphQLError } from 'graphql'
+import type { Pool, PoolClient } from 'pg'
+import { appSchemaReady, homeColumn } from '../db/appSchema.ts'
+import { pool } from '../db/db.ts'
+import { validatePassword } from './validation.ts'
+
+export type AppUser = {
+  id: string
+  username: string
+  email: string | null
+  phone: string | null
+  avatar: string | null
+  home_municipality: string | null
+}
+export type AuthUser = AppUser & { password_hash: Buffer; password_salt: Buffer }
+const scrypt = promisify(scryptCallback) as (
+  password: string,
+  salt: Buffer,
+  length: number,
+) => Promise<Buffer>
+export function validateEmail(email: string | null) {
+  const value = email?.trim().toLowerCase() || ''
+  if (value.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+    throw new GraphQLError('Skriv inn en gyldig e-postadresse.')
+  return value
+}
+export function validateCredentials(username: string, password: string) {
+  const normalized = username.trim()
+  if (!/^[\p{L}\p{N}_.-]{3,30}$/u.test(normalized))
+    throw new GraphQLError(
+      'Brukernavnet må være 3–30 tegn og kan inneholde bokstaver, tall, punktum, bindestrek og understrek.',
+    )
+  validatePassword(password)
+  return normalized
+}
+export async function passwordHash(password: string, salt: Buffer) {
+  return Buffer.from(await scrypt(password, salt, 64))
+}
+export function tokenHash(token: string) {
+  return createHash('sha256').update(token).digest()
+}
+export async function createSession(client: Pool | PoolClient, userId: string) {
+  const token = randomBytes(32).toString('base64url')
+  await client.query(
+    "INSERT INTO norwegian_explorer_app.sessions(token_hash,user_id,expires_at) VALUES ($1,$2,now()+(30 * interval '1 day'))",
+    [tokenHash(token), userId],
+  )
+  return token
+}
+export async function userFromToken(token: string) {
+  if (!token || token.length > 200) return null
+  await appSchemaReady
+  const { rows } = await pool.query<AppUser>(
+    `SELECT u.id,u.username,u.email,u.phone,u.avatar,${await homeColumn('u.')} FROM norwegian_explorer_app.sessions s
+    JOIN norwegian_explorer_app.users u ON u.id=s.user_id
+    WHERE s.token_hash=$1 AND s.expires_at>now()`,
+    [tokenHash(token)],
+  )
+  return rows[0] || null
+}
+export async function requireUser(token: string) {
+  const user = await userFromToken(token)
+  if (!user) throw new GraphQLError('Du må logge inn.')
+  return user
+}
+
+/** Bytter passord og logger brukeren ut overalt: sletter alle sesjoner og åpne tilbakestillingslenker. */
+export async function setPassword(client: PoolClient, userId: string, newPassword: string) {
+  const salt = randomBytes(16)
+  const hash = await passwordHash(newPassword, salt)
+  await client.query(
+    'UPDATE norwegian_explorer_app.users SET password_hash=$2,password_salt=$3 WHERE id=$1',
+    [userId, hash, salt],
+  )
+  await client.query('DELETE FROM norwegian_explorer_app.sessions WHERE user_id=$1', [userId])
+  await client.query('DELETE FROM norwegian_explorer_app.password_resets WHERE user_id=$1', [
+    userId,
+  ])
+}
+
+/**
+ * Pakker en resolver som krever innlogging: sjekker tokenet først og gir brukeren videre.
+ * Da kan ikke en ny resolver komme til å glemme innloggingssjekken.
+ */
+export const authed =
+  <A extends { token: string }>(resolve: (user: AppUser, args: A) => unknown) =>
+  async (_parent: unknown, args: A) =>
+    resolve(await requireUser(args.token), args)
diff --git a/server/lib/authLimits.ts b/server/lib/authLimits.ts
new file mode 100644
index 0000000..8d1c214
--- /dev/null
+++ b/server/lib/authLimits.ts
@@ -0,0 +1,17 @@
+import { GraphQLError } from 'graphql'
+// In-memory guard for this single-process prototype; do not trust forwarded IP headers.
+const attempts = new Map<string, { start: number; count: number }>()
+let globalWindow = { start: 0, count: 0 }
+export function checkAuthAttempt(username: string, now = Date.now()) {
+  if (now - globalWindow.start >= 60000) globalWindow = { start: now, count: 0 }
+  if (++globalWindow.count > 120)
+    throw new GraphQLError('For mange innloggingsforsøk. Vent ett minutt og prøv igjen.')
+  for (const [key, value] of attempts) if (now - value.start >= 900000) attempts.delete(key)
+  const key = username.trim().toLowerCase().slice(0, 100)
+  const value = attempts.get(key) || { start: now, count: 0 }
+  attempts.set(key, value)
+  if (++value.count > 20)
+    throw new GraphQLError(
+      'For mange forsøk for dette brukernavnet. Vent 15 minutter og prøv igjen.',
+    )
+}
diff --git a/server/passwordMail.ts b/server/lib/passwordMail.ts
similarity index 77%
rename from server/passwordMail.ts
rename to server/lib/passwordMail.ts
index 9b164ca..ddf5530 100644
--- a/server/passwordMail.ts
+++ b/server/lib/passwordMail.ts
@@ -3,7 +3,12 @@ import { mkdir, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { randomUUID } from 'node:crypto'
 
-export function resetDeliveryAvailable() { return Boolean(process.env.SENDMAIL_PATH || (process.env.PASSWORD_RESET_OUTBOX && process.env.NODE_ENV !== 'production')) }
+export function resetDeliveryAvailable() {
+  return Boolean(
+    process.env.SENDMAIL_PATH ||
+    (process.env.PASSWORD_RESET_OUTBOX && process.env.NODE_ENV !== 'production'),
+  )
+}
 export async function sendPasswordReset(email: string, token: string) {
   const base = new URL(process.env.APP_PUBLIC_URL || 'http://localhost:5173/')
   if (!['http:', 'https:'].includes(base.protocol)) throw new Error('Invalid APP_PUBLIC_URL')
@@ -13,14 +18,21 @@ export async function sendPasswordReset(email: string, token: string) {
   const message = `From: ${from}\nTo: ${email}\nSubject: Tilbakestill passordet ditt\nMIME-Version: 1.0\nContent-Type: text/plain; charset=UTF-8\n\nÅpne lenken for å velge et nytt passord:\n${base.href}\n\nLenken gjelder i 30 minutter og kan brukes én gang. Hvis du ikke ba om dette, kan du se bort fra meldingen.\n`
   if (process.env.SENDMAIL_PATH) {
     await new Promise<void>((resolve, reject) => {
-      const child = spawn(process.env.SENDMAIL_PATH!, ['-t', '-i'], { stdio: ['pipe', 'ignore', 'ignore'], timeout: 15000 })
+      const child = spawn(process.env.SENDMAIL_PATH!, ['-t', '-i'], {
+        stdio: ['pipe', 'ignore', 'ignore'],
+        timeout: 15000,
+      })
       child.once('error', reject)
       child.stdin.on('error', reject)
-      child.once('close', code => code === 0 ? resolve() : reject(new Error('Mail delivery failed')))
+      child.once('close', (code) =>
+        code === 0 ? resolve() : reject(new Error('Mail delivery failed')),
+      )
       child.stdin.end(message)
     })
   } else if (process.env.PASSWORD_RESET_OUTBOX && process.env.NODE_ENV !== 'production') {
     await mkdir(process.env.PASSWORD_RESET_OUTBOX, { recursive: true, mode: 0o700 })
-    await writeFile(join(process.env.PASSWORD_RESET_OUTBOX, `${randomUUID()}.eml`), message, {mode: 0o600})
+    await writeFile(join(process.env.PASSWORD_RESET_OUTBOX, `${randomUUID()}.eml`), message, {
+      mode: 0o600,
+    })
   } else throw new Error('Mail delivery is not configured')
 }
diff --git a/server/lib/requestSafety.ts b/server/lib/requestSafety.ts
new file mode 100644
index 0000000..8aa0c80
--- /dev/null
+++ b/server/lib/requestSafety.ts
@@ -0,0 +1,100 @@
+import type {
+  ValidationContext,
+  DocumentNode,
+  SelectionSetNode,
+  FragmentDefinitionNode,
+} from 'graphql'
+import type { Plugin, GraphQLParams } from 'graphql-yoga'
+import { GraphQLError, Kind } from 'graphql'
+export function queryBudget(context: ValidationContext) {
+  return {
+    Document(document: DocumentNode) {
+      const fragments = new Map<string, FragmentDefinitionNode>(
+        document.definitions
+          .filter((d) => d.kind === Kind.FRAGMENT_DEFINITION)
+          .map((d) => [d.name.value, d]),
+      )
+      for (const operation of document.definitions.filter(
+        (d) => d.kind === Kind.OPERATION_DEFINITION,
+      )) {
+        let fields = 0,
+          roots = 0
+        function walk(set: SelectionSetNode | undefined, depth: number, path = new Set<string>()) {
+          if (depth > 12) throw new Error('Spørringen er for dypt nestet.')
+          for (const selection of set?.selections || []) {
+            if (selection.kind === Kind.FIELD) {
+              if (++fields > 300 || (depth === 1 && ++roots > 20))
+                throw new Error('Spørringen inneholder for mange felt.')
+              walk(selection.selectionSet, depth + 1, path)
+            } else if (selection.kind === Kind.INLINE_FRAGMENT)
+              walk(selection.selectionSet, depth, path)
+            else {
+              const name = selection.name.value
+              if (path.has(name)) throw new Error('Spørringen inneholder en fragmentsyklus.')
+              const fragment = fragments.get(name)
+              if (fragment) walk(fragment.selectionSet, depth, new Set([...path, name]))
+            }
+          }
+        }
+        try {
+          walk(operation.selectionSet, 1)
+        } catch (error) {
+          context.reportError(
+            new GraphQLError(error instanceof Error ? error.message : 'Ugyldig spørring.'),
+          )
+        }
+      }
+    },
+  }
+}
+export async function boundedJson(request: Request): Promise<GraphQLParams> {
+  const reader = request.body?.getReader()
+  const chunks: Buffer[] = []
+  let length = 0
+  if (!reader) throw new GraphQLError('Forespørselen mangler innhold.')
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      length += value.byteLength
+      if (length > 6000000) {
+        await reader.cancel()
+        throw new GraphQLError('Forespørselen er for stor.')
+      }
+      chunks.push(Buffer.from(value))
+    }
+  } finally {
+    reader.releaseLock()
+  }
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString('utf8'))
+  } catch {
+    throw new GraphQLError('Ugyldig JSON i forespørselen.')
+  }
+}
+export const requestSafety: Plugin = {
+  onRequestParse({ request, setRequestParser, endResponse }) {
+    if (request.method === 'POST') {
+      if (
+        request.headers.get('content-type')?.split(';')[0].trim().toLowerCase() !==
+        'application/json'
+      ) {
+        endResponse(new Response('Bruk application/json.', { status: 415 }))
+        return
+      }
+      setRequestParser(boundedJson)
+    }
+  },
+  onParams({ request, params }) {
+    if (request.method !== 'POST') throw new GraphQLError('Send GraphQL-spørringer med POST.')
+    if (!params.query || params.query.length > 100000)
+      throw new GraphQLError('Spørringen mangler eller er for stor.')
+  },
+  onValidate({ addValidationRule }) {
+    addValidationRule(queryBudget)
+  },
+  onResponse({ response }) {
+    response.headers.set('Cache-Control', 'no-store')
+    response.headers.set('X-Content-Type-Options', 'nosniff')
+  },
+}
diff --git a/server/lib/validation.ts b/server/lib/validation.ts
new file mode 100644
index 0000000..949ef1b
--- /dev/null
+++ b/server/lib/validation.ts
@@ -0,0 +1,26 @@
+// Delte kontroller av input, så samme regel ikke skrives på flere steder.
+import { GraphQLError } from 'graphql'
+
+/** Rute-id-er er 32 heksadesimale tegn. */
+export const isRouteId = (id: unknown): id is string =>
+  typeof id === 'string' && /^[a-f0-9]{32}$/.test(id)
+
+export function assertRouteId(id: unknown): asserts id is string {
+  if (!isRouteId(id)) throw new GraphQLError('Ugyldig rute.')
+}
+
+/** Passord må være 10–200 tegn. Brukes ved registrering, bytte og tilbakestilling. */
+export function validatePassword(password: string) {
+  if (password.length < 10 || password.length > 200)
+    throw new GraphQLError('Passordet må være mellom 10 og 200 tegn.')
+}
+
+/** Kartutsnitt i grader: innenfor jordkloden, og vest for øst og sør for nord. */
+export const isValidBounds = (west: number, south: number, east: number, north: number) =>
+  [west, south, east, north].every(Number.isFinite) &&
+  west >= -180 &&
+  east <= 180 &&
+  south >= -90 &&
+  north <= 90 &&
+  west < east &&
+  south < north
diff --git a/server/requestSafety.ts b/server/requestSafety.ts
deleted file mode 100644
index 71bc69b..0000000
--- a/server/requestSafety.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type {ValidationContext,DocumentNode,SelectionSetNode,FragmentDefinitionNode} from 'graphql'
-import type {Plugin,GraphQLParams} from 'graphql-yoga'
-import {GraphQLError,Kind} from 'graphql'
-export function queryBudget(context:ValidationContext){
-  return {Document(document:DocumentNode){
-    const fragments=new Map<string,FragmentDefinitionNode>(document.definitions.filter(d=>d.kind===Kind.FRAGMENT_DEFINITION).map(d=>[d.name.value,d]))
-    for(const operation of document.definitions.filter(d=>d.kind===Kind.OPERATION_DEFINITION)){
-      let fields=0,roots=0
-      function walk(set:SelectionSetNode|undefined,depth:number,path=new Set<string>()){
-        if(depth>12)throw new Error('Spørringen er for dypt nestet.')
-        for(const selection of set?.selections||[]){
-          if(selection.kind===Kind.FIELD){if(++fields>300||(depth===1&&++roots>20))throw new Error('Spørringen inneholder for mange felt.');walk(selection.selectionSet,depth+1,path)}
-          else if(selection.kind===Kind.INLINE_FRAGMENT)walk(selection.selectionSet,depth,path)
-          else {const name=selection.name.value;if(path.has(name))throw new Error('Spørringen inneholder en fragmentsyklus.');const fragment=fragments.get(name);if(fragment)walk(fragment.selectionSet,depth,new Set([...path,name]))}
-        }
-      }
-      try{walk(operation.selectionSet,1)}catch(error){context.reportError(new GraphQLError(error instanceof Error?error.message:'Ugyldig spørring.'))}
-    }
-  }}
-}
-export async function boundedJson(request:Request):Promise<GraphQLParams>{
-  const reader=request.body?.getReader();const chunks:Buffer[]=[];let length=0
-  if(!reader)throw new GraphQLError('Forespørselen mangler innhold.')
-  try{while(true){const {done,value}=await reader.read();if(done)break;length+=value.byteLength;if(length>6000000){await reader.cancel();throw new GraphQLError('Forespørselen er for stor.')}chunks.push(Buffer.from(value))}}
-  finally{reader.releaseLock()}
-  try{return JSON.parse(Buffer.concat(chunks).toString('utf8'))}catch{throw new GraphQLError('Ugyldig JSON i forespørselen.')}
-}
-export const requestSafety:Plugin={
-  onRequestParse({request,setRequestParser,endResponse}){
-    if(request.method==='POST'){
-      if(request.headers.get('content-type')?.split(';')[0].trim().toLowerCase()!=='application/json'){endResponse(new Response('Bruk application/json.',{status:415}));return}
-      setRequestParser(boundedJson)
-    }
-  },
-  onParams({request,params}){
-    if(request.method!=='POST')throw new GraphQLError('Send GraphQL-spørringer med POST.')
-    if(!params.query||params.query.length>100000)throw new GraphQLError('Spørringen mangler eller er for stor.')
-  },
-  onValidate({addValidationRule}){addValidationRule(queryBudget)},
-  onResponse({response}){response.headers.set('Cache-Control','no-store');response.headers.set('X-Content-Type-Options','nosniff')}
-}
diff --git a/server/routeStops.ts b/server/routeStops.ts
deleted file mode 100644
index 99c595f..0000000
--- a/server/routeStops.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {GraphQLError} from 'graphql'
-import {pool} from './db.ts'
-import {sampleRoute} from './elevation.ts'
-
-const kinds=['alpine_hut','wilderness_hut','chalet','shelter','lean_to','viewpoint','picnic_site','toilets','drinking_water','parking','camp_site','peak']
-const facilityGroups:Record<string,string[]>={hut:['alpine_hut','wilderness_hut','chalet'],shelter:['shelter','lean_to'],viewpoint:['viewpoint'],picnic_site:['picnic_site'],toilets:['toilets'],drinking_water:['drinking_water'],parking:['parking'],camp_site:['camp_site'],peak:['peak']}
-const facilityCache=new Map<string,{ids:string[];expires:number}>()
-const facilityPending=new Map<string,Promise<string[]>>()
-let facilityIndexReady:Promise<void>|null
-async function ensureFacilityIndex(){
-  if(!facilityIndexReady)facilityIndexReady=(async()=>{
-    const client=await pool.connect()
-    try{
-      await client.query('BEGIN')
-      await client.query("SET LOCAL statement_timeout='60s'")
-      await client.query(`CREATE MATERIALIZED VIEW IF NOT EXISTS norwegian_explorer_app.route_facility_segments AS
-        SELECT id,ST_Transform(part,4326)::geography geog FROM (
-          SELECT id,ST_Subdivide(geom,128) part FROM norwegian_explorer_app.route_catalog
-          UNION ALL SELECT id,ST_Subdivide(geom,128) part FROM norwegian_explorer_app.route_loops
-        ) parts`)
-      await client.query('CREATE INDEX IF NOT EXISTS route_facility_segments_geog_idx ON norwegian_explorer_app.route_facility_segments USING gist(geog)')
-      await client.query('ANALYZE norwegian_explorer_app.route_facility_segments')
-      await client.query('COMMIT')
-    }catch(error){await client.query('ROLLBACK');throw error}finally{client.release()}
-  })().catch(error=>{facilityIndexReady=null;throw error})
-  await facilityIndexReady
-}
-async function loadFacilityRouteIds(facility:string){
-  if(!Object.hasOwn(facilityGroups,facility))throw new GraphQLError('Ugyldig kategori for steder nær ruten.')
-  const cached=facilityCache.get(facility)
-  if(cached&&cached.expires>Date.now())return cached.ids
-  await ensureFacilityIndex()
-  const ids=new Set<string>()
-  for(let offset=0;;offset+=5000){
-    const {rows}=await pool.query(`WITH places AS MATERIALIZED (
-    SELECT ST_PointOnSurface(geom)::geography point FROM osm_import.objects
-    WHERE category='place' AND NOT ST_IsEmpty(geom)
-      AND coalesce(tags->>'tourism',tags->>'amenity',tags->>'natural')=ANY($1::text[])
-      AND coalesce(tags->>'access','') NOT IN ('no','private') AND coalesce(tags->>'foot','') NOT IN ('no','private')
-    ORDER BY osm_type,osm_id LIMIT 5000 OFFSET $2
-  ) SELECT (SELECT count(*)::int FROM places) count, ARRAY(SELECT DISTINCT s.id FROM places p
-    JOIN norwegian_explorer_app.route_facility_segments s ON ST_DWithin(s.geog,p.point,500)) ids`,[facilityGroups[facility],offset])
-    for(const id of rows[0].ids)ids.add(id)
-    if(rows[0].count<5000)break
-  }
-  const result=[...ids];facilityCache.set(facility,{ids:result,expires:Date.now()+600000});return result
-}
-export async function nearbyFacilityRouteIds(facility:string){
-  if(!Object.hasOwn(facilityGroups,facility))throw new GraphQLError('Ugyldig kategori for steder nær ruten.')
-  if(!facilityPending.has(facility))facilityPending.set(facility,loadFacilityRouteIds(facility).finally(()=>facilityPending.delete(facility)))
-  return facilityPending.get(facility)
-}
-export async function routeStops(geojson:string,ids:string[]|null=null){
-  if(ids && ids.length===0)return {stops:[],truncated:false}
-  sampleRoute(geojson)
-  if(ids && (ids.length>20 || ids.some(id=>!/^([nw])\/[0-9]+$/.test(id)) || new Set(ids).size!==ids.length))throw new GraphQLError('Velg maks 20 forskjellige stopp.')
-  const {rows}=await pool.query(`WITH route AS (
-    SELECT ST_SetSRID(ST_GeomFromGeoJSON($1),4326) geom
-  ), candidates AS (
-    SELECT o.osm_type || '/' || o.osm_id::text id,o.name,o.tags,ST_PointOnSurface(o.geom) point,r.geom route,
-      coalesce(o.tags->>'tourism',o.tags->>'amenity',o.tags->>'natural') kind
-    FROM osm_import.objects o CROSS JOIN route r
-    WHERE o.category='place' AND NOT ST_IsEmpty(o.geom)
-      AND o.geom && ST_Expand(r.geom,0.05)
-      AND coalesce(o.tags->>'access','') NOT IN ('no','private')
-      AND coalesce(o.tags->>'foot','') NOT IN ('no','private')
-      AND ($2::text[] IS NULL OR o.osm_type || '/' || o.osm_id::text=ANY($2))
-  ), nearby AS (
-    SELECT *,ST_Distance(point::geography,route::geography) AS distance
-    FROM candidates WHERE kind=ANY($3::text[])
-      AND ST_DWithin(point::geography,route::geography,500)
-  ) SELECT id,name,kind,ST_X(point) lon,ST_Y(point) lat,distance AS "distanceFromRouteMeters",
-    ST_LineLocatePoint(ST_Transform(route,25833),ST_Transform(point,25833))*ST_Length(route::geography) AS "distanceFromStartMeters",
-    tags->>'operator' operator,tags->>'opening_hours' AS "openingHours",tags->>'capacity' capacity,
-    tags->>'fee' fee,coalesce(tags->>'website',tags->>'contact:website') website
-  FROM nearby ORDER BY distance,id LIMIT 201`,[geojson,ids,kinds])
-  const stops=rows.slice(0,200).map(row=>({...row,website:row.website&&/^https?:\/\//i.test(row.website)?row.website:null}))
-    .sort((a,b)=>a.distanceFromStartMeters-b.distanceFromStartMeters||a.id.localeCompare(b.id))
-  if(ids && stops.length!==ids.length)throw new GraphQLError('Et valgt stopp finnes ikke lenger eller ligger mer enn 500 meter fra den nye ruten. Oppdater stoppene før lagring.')
-  return {stops,truncated:rows.length>200}
-}
diff --git a/server/services/customRoutes.ts b/server/services/customRoutes.ts
new file mode 100644
index 0000000..0fd377b
--- /dev/null
+++ b/server/services/customRoutes.ts
@@ -0,0 +1,343 @@
+import { GraphQLError } from 'graphql'
+import { pool } from '../db/db.ts'
+import { isRouteId } from '../lib/validation.ts'
+
+export type BuilderPoint = { lon: number; lat: number }
+type NetworkNode = { id: string; xy: number[]; ll: number[]; neighbors: Map<string, number> }
+type LineRow = { projected: { coordinates: number[][] }; geographic: { coordinates: number[][] } }
+type RingRow = LineRow & { id: string; length: number }
+type Network = {
+  nodes: Map<string, NetworkNode>
+  sourceRouteId: string
+  sourceName: string
+  geojson: string
+  cycles?: Promise<RingRow[]>
+}
+const networks = new Map<string, Promise<Network>>()
+export function builderNetwork(routeId: string | null = null) {
+  if (routeId && !isRouteId(routeId)) throw new GraphQLError('Ugyldig kilderute.')
+  const key = routeId || 'Bymarka'
+  if (!networks.has(key)) {
+    if (networks.size >= 4) networks.delete(networks.keys().next().value!)
+    networks.set(
+      key,
+      loadNetwork(routeId).catch((error) => {
+        networks.delete(key)
+        throw error
+      }),
+    )
+  }
+  return networks.get(key)!
+}
+async function loadNetwork(routeId: string | null): Promise<Network> {
+  const { rows: sources } = await pool.query(
+    `SELECT id,name FROM norwegian_explorer_app.route_catalog
+    WHERE (($1::text IS NOT NULL AND id=$1) OR ($1::text IS NULL AND name='Bymarka'))
+    AND NOT EXISTS(SELECT 1 FROM norwegian_explorer_app.route_exclusions e WHERE e.route_id=route_catalog.id)
+    UNION ALL SELECT id,name FROM norwegian_explorer_app.route_loops WHERE id=$1`,
+    [routeId],
+  )
+  if (!sources.length) throw new GraphQLError('Kilderuten finnes ikke lenger. Velg en annen rute.')
+  const source = sources[0]
+  const { rows } = await pool.query<LineRow>(
+    `WITH network AS (
+    SELECT ST_Node(ST_UnaryUnion(ST_Collect(geom))) AS geom
+    FROM (SELECT geom FROM norwegian_explorer_app.route_catalog WHERE id=$1
+      UNION ALL SELECT geom FROM norwegian_explorer_app.route_loops WHERE id=$1) source
+  ), lines AS (
+    SELECT (ST_Dump(ST_Segmentize(geom,30))).geom AS geom FROM network
+  ) SELECT ST_AsGeoJSON(geom)::json AS projected,
+    ST_AsGeoJSON(ST_Transform(geom,4326))::json AS geographic FROM lines`,
+    [source.id],
+  )
+  if (!rows.length) throw new GraphQLError('Denne ruten har ikke et tilgjengelig stinett.')
+  const pointCount = rows.reduce((total, row) => total + row.projected.coordinates.length, 0)
+  if (pointCount > 250000)
+    throw new GraphQLError('Stinettet er for stort for rutebyggeren. Velg en mindre rutevariant.')
+  const nodes = new Map<string, NetworkNode>()
+  const key = (point: number[]) => point.map((n) => n.toFixed(6)).join(',')
+  for (const row of rows) {
+    const xy = row.projected.coordinates
+    const ll = row.geographic.coordinates
+    for (let i = 0; i < xy.length; i++) {
+      const id = key(xy[i])
+      if (!nodes.has(id)) nodes.set(id, { id, xy: xy[i], ll: ll[i], neighbors: new Map() })
+      if (i) {
+        const a = nodes.get(key(xy[i - 1]))!,
+          b = nodes.get(id)!
+        const distance = Math.hypot(a.xy[0] - b.xy[0], a.xy[1] - b.xy[1])
+        a.neighbors.set(b.id, distance)
+        b.neighbors.set(a.id, distance)
+      }
+    }
+  }
+  return {
+    nodes,
+    sourceRouteId: source.id,
+    sourceName: source.name,
+    geojson: JSON.stringify({
+      type: 'MultiLineString',
+      coordinates: rows.map((row) => row.geographic.coordinates),
+    }),
+  }
+}
+
+function shortestPath(nodes: Map<string, NetworkNode>, start: string, end: string) {
+  const distances = new Map([[start, 0]]),
+    previous = new Map(),
+    visited = new Set()
+  const queue: [number, string][] = [[0, start]]
+  function push(entry: [number, string]) {
+    queue.push(entry)
+    let i = queue.length - 1
+    while (i > 0) {
+      const parent = Math.floor((i - 1) / 2)
+      if (queue[parent][0] <= entry[0]) break
+      queue[i] = queue[parent]
+      i = parent
+    }
+    queue[i] = entry
+  }
+  function pop() {
+    const result = queue[0],
+      last = queue.pop()!
+    if (queue.length) {
+      let i = 0
+      queue[0] = last
+      while (true) {
+        let child = i * 2 + 1
+        if (child >= queue.length) break
+        if (child + 1 < queue.length && queue[child + 1][0] < queue[child][0]) child++
+        if (queue[child][0] >= last[0]) break
+        queue[i] = queue[child]
+        i = child
+      }
+      queue[i] = last
+    }
+    return result
+  }
+  while (queue.length) {
+    const [distance, id] = pop()
+    if (visited.has(id)) continue
+    visited.add(id)
+    if (id === end) {
+      const path = [id]
+      while (path[path.length - 1] !== start) path.push(previous.get(path[path.length - 1]))
+      path.reverse()
+      return { path, distance }
+    }
+    for (const [neighbor, cost] of nodes.get(id)!.neighbors) {
+      const next = distance + cost
+      if (next < (distances.get(neighbor) ?? Infinity)) {
+        distances.set(neighbor, next)
+        previous.set(neighbor, id)
+        push([next, neighbor])
+      }
+    }
+  }
+  throw new GraphQLError(
+    'Punktene ligger på adskilte deler av stinettet. Flytt et punkt til en sti som er koblet til de andre.',
+  )
+}
+
+export async function planCustomRoute(points: BuilderPoint[], routeId: string | null = null) {
+  if (
+    !Array.isArray(points) ||
+    points.length < 2 ||
+    points.length > 12 ||
+    points.some(
+      (p) =>
+        !p ||
+        !Number.isFinite(p.lon) ||
+        !Number.isFinite(p.lat) ||
+        p.lon < -180 ||
+        p.lon > 180 ||
+        p.lat < -90 ||
+        p.lat > 90,
+    )
+  )
+    throw new GraphQLError('Velg 2–12 gyldige punkter på den valgte ruten.')
+  const network = await builderNetwork(routeId)
+  const { rows } = await pool.query(
+    `SELECT ST_X(p) AS x,ST_Y(p) AS y FROM (
+    SELECT ST_Transform(ST_SetSRID(ST_MakePoint((v->>'lon')::float8,(v->>'lat')::float8),4326),25833) AS p
+    FROM jsonb_array_elements($1::jsonb) WITH ORDINALITY AS input(v,n) ORDER BY n
+  ) transformed`,
+    [JSON.stringify(points)],
+  )
+  const snapped = rows.map((point) => {
+    let best: NetworkNode | undefined,
+      distance = Infinity
+    for (const node of network.nodes.values()) {
+      const d = Math.hypot(node.xy[0] - point.x, node.xy[1] - point.y)
+      if (d < distance) {
+        best = node
+        distance = d
+      }
+    }
+    if (!best || distance > 120)
+      throw new GraphQLError(
+        'Et punkt er mer enn 120 meter fra de registrerte stiene. Flytt det nærmere en sti.',
+      )
+    return best
+  })
+  let lengthMeters = 0
+  const coordinates = []
+  for (let i = 1; i < snapped.length; i++) {
+    const leg = shortestPath(network.nodes, snapped[i - 1].id, snapped[i].id)
+    lengthMeters += leg.distance
+    for (const id of leg.path.slice(i === 1 ? 0 : 1)) coordinates.push(network.nodes.get(id)!.ll)
+  }
+  if (lengthMeters < 50) throw new GraphQLError('Velg punkter som gir en rute på minst 50 meter.')
+  return {
+    sourceRouteId: network.sourceRouteId,
+    sourceName: network.sourceName,
+    geojson: JSON.stringify({ type: 'LineString', coordinates }),
+    lengthMeters,
+    waypoints: snapped.map((node) => ({ lon: node.ll[0], lat: node.ll[1] })),
+  }
+}
+
+export async function suggestRoundTrips(
+  start: BuilderPoint,
+  desiredLengthMeters: number,
+  routeId: string | null = null,
+) {
+  if (
+    !start ||
+    !Number.isFinite(start.lon) ||
+    !Number.isFinite(start.lat) ||
+    Math.abs(start.lon) > 180 ||
+    Math.abs(start.lat) > 90 ||
+    !Number.isFinite(desiredLengthMeters) ||
+    desiredLengthMeters < 500 ||
+    desiredLengthMeters > 50000
+  )
+    throw new GraphQLError('Velg et gyldig startpunkt og en lengde mellom 0,5 og 50 km.')
+  const network = await builderNetwork(routeId)
+  const {
+    rows: [position],
+  } = await pool.query(
+    'SELECT ST_X(p) AS x,ST_Y(p) AS y FROM (SELECT ST_Transform(ST_SetSRID(ST_MakePoint($1,$2),4326),25833) p) point',
+    [start.lon, start.lat],
+  )
+  let startNode: NetworkNode | undefined,
+    distance = Infinity
+  for (const node of network.nodes.values()) {
+    const d = Math.hypot(node.xy[0] - position.x, node.xy[1] - position.y)
+    if (d < distance) {
+      distance = d
+      startNode = node
+    }
+  }
+  if (!startNode || distance > 120)
+    throw new GraphQLError('Startpunktet må være innen 120 meter fra det valgte stinettet.')
+  if (!network.cycles)
+    network.cycles = pool
+      .query<RingRow>(
+        `WITH source AS (
+    SELECT geom FROM norwegian_explorer_app.route_catalog WHERE id=$1
+    UNION ALL SELECT geom FROM norwegian_explorer_app.route_loops WHERE id=$1
+  ), network AS (SELECT ST_Node(ST_UnaryUnion(ST_Collect(geom))) geom FROM source),
+  polygons AS (SELECT (ST_Dump(ST_CollectionExtract(ST_Polygonize(ARRAY[geom]),3))).geom geom FROM network),
+  rings AS (SELECT ST_ExteriorRing(geom) geom FROM polygons)
+  SELECT md5(ST_AsEWKB(ST_Normalize(geom))::text) id,ST_AsGeoJSON(geom)::json projected,
+    ST_AsGeoJSON(ST_Transform(geom,4326))::json geographic,ST_Length(geom) length
+  FROM rings WHERE ST_Length(geom) BETWEEN 200 AND 50000`,
+        [network.sourceRouteId],
+      )
+      .then((result) => result.rows)
+      .catch((error) => {
+        network.cycles = undefined
+        throw error
+      })
+  const rings = await network.cycles
+  const candidates = []
+  for (const ring of rings) {
+    let anchorIndex = 0,
+      near = Infinity
+    const xy = ring.projected.coordinates.slice(0, -1)
+    const ll = ring.geographic.coordinates.slice(0, -1)
+    let directLoop = null
+    for (let i = 0; i < xy.length; i++) {
+      const a = xy[i],
+        b = xy[(i + 1) % xy.length],
+        dx = b[0] - a[0],
+        dy = b[1] - a[1]
+      const t =
+        ((startNode.xy[0] - a[0]) * dx + (startNode.xy[1] - a[1]) * dy) / (dx * dx + dy * dy)
+      if (
+        t >= 0 &&
+        t <= 1 &&
+        Math.hypot(a[0] + t * dx - startNode.xy[0], a[1] + t * dy - startNode.xy[1]) < 0.0001
+      ) {
+        directLoop = [startNode.ll, ...ll.slice(i + 1), ...ll.slice(0, i + 1), startNode.ll]
+        break
+      }
+    }
+    for (let i = 0; i < xy.length; i++) {
+      const d = Math.hypot(xy[i][0] - startNode.xy[0], xy[i][1] - startNode.xy[1])
+      if (d < near) {
+        near = d
+        anchorIndex = i
+      }
+    }
+    const anchor = directLoop
+      ? startNode
+      : network.nodes.get(xy[anchorIndex].map((n) => n.toFixed(6)).join(','))
+    if (anchor)
+      candidates.push({
+        ring,
+        anchor,
+        anchorIndex,
+        directLoop,
+        score: Math.abs(ring.length + 2 * (directLoop ? 0 : near) - desiredLengthMeters),
+      })
+  }
+  const proposals = []
+  for (const { ring, anchor, anchorIndex, directLoop } of candidates
+    .sort((a, b) => a.score - b.score)
+    .slice(0, 40)) {
+    let connector
+    try {
+      connector = shortestPath(network.nodes, startNode.id, anchor.id)
+    } catch {
+      continue
+    }
+    const lengthMeters = ring.length + 2 * connector.distance
+    if (Math.abs(lengthMeters - desiredLengthMeters) > Math.max(300, desiredLengthMeters * 0.4))
+      continue
+    const access = connector.path.map((id) => network.nodes.get(id)!.ll)
+    const ringCoords = ring.geographic.coordinates.slice(0, -1)
+    const loop = directLoop || [
+      ...ringCoords.slice(anchorIndex),
+      ...ringCoords.slice(0, anchorIndex),
+      ringCoords[anchorIndex],
+    ]
+    const coordinates = []
+    for (const point of access) coordinates.push(point)
+    for (const point of loop.slice(1)) coordinates.push(point)
+    for (const point of access.slice(0, -1).reverse()) coordinates.push(point)
+    const [lon, lat] = startNode.ll
+    proposals.push({
+      id: ring.id,
+      sourceRouteId: network.sourceRouteId,
+      sourceName: network.sourceName,
+      geojson: JSON.stringify({ type: 'LineString', coordinates }),
+      lengthMeters,
+      connectorMeters: 2 * connector.distance,
+      differenceMeters: lengthMeters - desiredLengthMeters,
+      waypoints: [
+        { lon, lat },
+        { lon, lat },
+      ],
+    })
+  }
+  return proposals
+    .sort(
+      (a, b) =>
+        Math.abs(a.differenceMeters) - Math.abs(b.differenceMeters) ||
+        a.connectorMeters - b.connectorMeters,
+    )
+    .slice(0, 3)
+}
diff --git a/server/services/elevation.ts b/server/services/elevation.ts
new file mode 100644
index 0000000..6305989
--- /dev/null
+++ b/server/services/elevation.ts
@@ -0,0 +1,149 @@
+import { createHash } from 'node:crypto'
+import { GraphQLError } from 'graphql'
+
+type SamplePoint = { distanceMeters: number; lon: number; lat: number }
+type Sample = { points: SamplePoint[]; lengthMeters: number; sampleIntervalMeters: number }
+type HeightResponse = { koordsys: number; punkter: { x: number; y: number; z: number | null }[] }
+const cache = new Map<string, { expires: number; value: ReturnType<typeof summarizeElevation> }>()
+const endpoint = 'https://ws.geonorge.no/hoydedata/v1/punkt'
+function distance(a: number[], b: number[]) {
+  const rad = Math.PI / 180
+  const dlat = (b[1] - a[1]) * rad,
+    dlon = (b[0] - a[0]) * rad
+  const h =
+    Math.sin(dlat / 2) ** 2 + Math.cos(a[1] * rad) * Math.cos(b[1] * rad) * Math.sin(dlon / 2) ** 2
+  return 6371000 * 2 * Math.atan2(Math.sqrt(h), Math.sqrt(Math.max(0, 1 - h)))
+}
+
+export function sampleRoute(geojson: string): Sample {
+  if (typeof geojson !== 'string' || geojson.length > 5000000)
+    throw new GraphQLError('Kartlinjen er for stor for høydeprofil.')
+  let geometry: { type?: string; coordinates?: number[][] } | null
+  try {
+    geometry = JSON.parse(geojson)
+  } catch {
+    throw new GraphQLError('Ugyldig kartlinje.')
+  }
+  if (
+    !geometry ||
+    geometry.type !== 'LineString' ||
+    !Array.isArray(geometry.coordinates) ||
+    geometry.coordinates.length < 2 ||
+    geometry.coordinates.length > 100000
+  )
+    throw new GraphQLError('Høydeprofil krever én sammenhengende rute.')
+  const coordinates = geometry.coordinates!
+  if (
+    coordinates.some(
+      (p) =>
+        !Array.isArray(p) ||
+        !Number.isFinite(p[0]) ||
+        !Number.isFinite(p[1]) ||
+        Math.abs(p[0]) > 180 ||
+        Math.abs(p[1]) > 90,
+    )
+  )
+    throw new GraphQLError('Ruten har ugyldige koordinater.')
+  const cumulative = [0]
+  for (let i = 1; i < coordinates.length; i++)
+    cumulative.push(cumulative[i - 1] + distance(coordinates[i - 1], coordinates[i]))
+  const length = cumulative.at(-1)!
+  if (length < 1) throw new GraphQLError('Ruten er for kort for en høydeprofil.')
+  const count = Math.min(200, Math.max(2, Math.ceil(length / 50) + 1)),
+    points = []
+  let segment = 1
+  for (let i = 0; i < count; i++) {
+    const meters = (i * length) / (count - 1)
+    while (segment < cumulative.length - 1 && cumulative[segment] < meters) segment++
+    const a = coordinates[segment - 1],
+      b = coordinates[segment],
+      span = cumulative[segment] - cumulative[segment - 1]
+    const ratio = span ? (meters - cumulative[segment - 1]) / span : 0
+    points.push({
+      distanceMeters: meters,
+      lon: a[0] + (b[0] - a[0]) * ratio,
+      lat: a[1] + (b[1] - a[1]) * ratio,
+    })
+  }
+  return { points, lengthMeters: length, sampleIntervalMeters: length / (count - 1) }
+}
+
+export function summarizeElevation(sample: Sample, heights: (number | null)[]) {
+  const points = sample.points.map((point, i) => ({
+    ...point,
+    elevation: Number.isFinite(heights[i]) ? heights[i] : null,
+  }))
+  const valid = points.filter(
+      (p): p is (typeof points)[number] & { elevation: number } => p.elevation != null,
+    ),
+    complete = valid.length === points.length
+  let ascent = 0,
+    descent = 0
+  if (complete)
+    for (let i = 1; i < points.length; i++) {
+      const delta = points[i].elevation! - points[i - 1].elevation!
+      ascent += Math.max(0, delta)
+      descent += Math.max(0, -delta)
+    }
+  return {
+    ...sample,
+    points,
+    ascentMeters: complete ? ascent : null,
+    descentMeters: complete ? descent : null,
+    minElevation: valid.length ? Math.min(...valid.map((p) => p.elevation)) : null,
+    maxElevation: valid.length ? Math.max(...valid.map((p) => p.elevation)) : null,
+    complete,
+    missingCount: points.length - valid.length,
+    source: 'Kartverkets høydedata-API',
+  }
+}
+
+export async function elevationProfile(geojson: string, fetcher: typeof fetch = fetch) {
+  const sample = sampleRoute(geojson)
+  const key = createHash('sha256').update(JSON.stringify(sample.points)).digest('hex')
+  const existing = cache.get(key)
+  if (existing && existing.expires > Date.now()) return existing.value
+  const heights = new Array(sample.points.length).fill(null)
+  const signal = AbortSignal.timeout(20000)
+  const batches: number[] = []
+  for (let i = 0; i < sample.points.length; i += 50) batches.push(i)
+  let next = 0
+  async function worker() {
+    while (next < batches.length) {
+      const offset = batches[next++],
+        batch = sample.points.slice(offset, offset + 50)
+      const url = new URL(endpoint)
+      url.searchParams.set('koordsys', '4326')
+      url.searchParams.set('punkter', JSON.stringify(batch.map((p) => [p.lon, p.lat])))
+      const response = await fetcher(url, { signal })
+      if (!response.ok) throw new Error('Høydetjenesten svarte ikke.')
+      const result = (await response.json()) as HeightResponse
+      if (result.koordsys !== 4326 || !Array.isArray(result.punkter))
+        throw new Error('Uventet svar fra høydetjenesten.')
+      for (let i = 0; i < batch.length; i++) {
+        const point = batch[i]
+        const match = result.punkter.find(
+          (p) =>
+            Number.isFinite(p.x) &&
+            Number.isFinite(p.y) &&
+            Math.abs(p.x - point.lon) < 0.000001 &&
+            Math.abs(p.y - point.lat) < 0.000001,
+        )
+        if (match && Number.isFinite(match.z)) heights[offset + i] = match.z
+      }
+    }
+  }
+  try {
+    await Promise.all([worker(), worker()])
+  } catch {
+    throw new GraphQLError(
+      'Høydetjenesten er utilgjengelig akkurat nå. Ruten kan fortsatt brukes og lagres; prøv høydeprofilen igjen senere.',
+    )
+  }
+  if (heights.every((value) => value == null))
+    throw new GraphQLError('Ingen høydedata er tilgjengelige for denne ruten.')
+  const result = summarizeElevation(sample, heights)
+  if (cache.size >= 50) cache.delete(cache.keys().next().value!)
+  cache.set(key, { expires: Date.now() + 3600000, value: result })
+  return result
+}
diff --git a/server/mountainAreas.ts b/server/services/mountainAreas.ts
similarity index 84%
rename from server/mountainAreas.ts
rename to server/services/mountainAreas.ts
index e2b9f64..43895a2 100644
--- a/server/mountainAreas.ts
+++ b/server/services/mountainAreas.ts
@@ -1,7 +1,7 @@
 // Fjellområder fra silver.mountain_areas, med nøkkeltall om hva som finnes i hvert område
 // (antall hytter, buer, topper og høyeste topp) hentet fra silver.osm_points_of_interest.
 // Se server/sql/silver/mountain_areas.sql for hvordan områdene er definert.
-import { pool } from './db.ts'
+import { pool } from '../db/db.ts'
 
 interface Peak {
   name: string
@@ -64,10 +64,15 @@ const AREAS_SQL = `
 `
 
 // Databasen gir høyeste topp som to kolonner. GraphQL-typen samler dem i ett objekt.
-function toMountainArea({ highestPeakName, highestPeakElevation, ...area }: MountainAreaRow): MountainArea {
-  const highestPeak = highestPeakName !== null && highestPeakElevation !== null
-    ? { name: highestPeakName, elevation: highestPeakElevation }
-    : null
+function toMountainArea({
+  highestPeakName,
+  highestPeakElevation,
+  ...area
+}: MountainAreaRow): MountainArea {
+  const highestPeak =
+    highestPeakName !== null && highestPeakElevation !== null
+      ? { name: highestPeakName, elevation: highestPeakElevation }
+      : null
   return { ...area, highestPeak }
 }
 
@@ -78,9 +83,13 @@ let cache: { at: number; areas: Promise<MountainArea[]> } | null = null
 
 export function getMountainAreas(): Promise<MountainArea[]> {
   if (!cache || Date.now() - cache.at > CACHE_MS) {
-    const areas = pool.query<MountainAreaRow>(AREAS_SQL).then(({ rows }) => rows.map(toMountainArea))
+    const areas = pool
+      .query<MountainAreaRow>(AREAS_SQL)
+      .then(({ rows }) => rows.map(toMountainArea))
     cache = { at: Date.now(), areas }
-    areas.catch(() => { cache = null })   // en feil skal ikke huskes, neste forespørsel prøver igjen
+    areas.catch(() => {
+      cache = null
+    }) // en feil skal ikke huskes, neste forespørsel prøver igjen
   }
   return cache.areas
 }
diff --git a/server/pointsOfInterest.ts b/server/services/pointsOfInterest.ts
similarity index 94%
rename from server/pointsOfInterest.ts
rename to server/services/pointsOfInterest.ts
index dd86b61..d91f09d 100644
--- a/server/pointsOfInterest.ts
+++ b/server/services/pointsOfInterest.ts
@@ -1,7 +1,7 @@
 // Henter hyttene, buene, gapahukene og toppene i et fjellområde fra det rensede viewet
 // silver.osm_points_of_interest (se server/sql/silver/osm_points_of_interest.sql for hvordan det er laget).
 import { GraphQLError } from 'graphql'
-import { pool } from './db.ts'
+import { pool } from '../db/db.ts'
 
 interface PointOfInterest {
   id: string
@@ -23,7 +23,8 @@ export async function getAreaPointsOfInterest(areaId: string): Promise<PointOfIn
   // inside bruker samme ST_Intersects som når punktene telles i server/mountainAreas.ts, så lista og tallene stemmer.
   // && med ST_Expand bruker den romlige indeksen til å finne kandidatene raskt, og ST_DWithin på geography
   // regner avstanden i meter.
-  const { rows } = await pool.query<PointOfInterest>(`
+  const { rows } = await pool.query<PointOfInterest>(
+    `
     SELECT p.id, p.kind, p.dnt_type AS "dntType", p.name,
            p.lon::float8 AS lon, p.lat::float8 AS lat,
            p.elevation, p.capacity,
@@ -33,7 +34,9 @@ export async function getAreaPointsOfInterest(areaId: string): Promise<PointOfIn
       AND p.geom && ST_Expand(a.area, 0.3)
       AND ST_DWithin(p.geom::geography, a.area::geography, 10000)
     WHERE p.kind IN ('HUT', 'CABIN', 'SHELTER', 'PEAK')
-  `, [areaId])
+  `,
+    [areaId],
+  )
   return rows
 }
 
@@ -50,7 +53,8 @@ export async function searchPointsOfInterest(query: string): Promise<PointSearch
   // % og _ betyr noe spesielt i ILIKE, så de må escapes for å søkes etter som vanlige tegn
   const pattern = text.replace(/[\\%_]/g, '\\$&')
   // Navn som starter med søketeksten kommer først, deretter hytter før buer, gapahuker og topper
-  const { rows } = await pool.query<PointOfInterest & { areaId: string }>(`
+  const { rows } = await pool.query<PointOfInterest & { areaId: string }>(
+    `
     SELECT a.id AS "areaId", p.id, p.kind, p.dnt_type AS "dntType", p.name,
            p.lon::float8 AS lon, p.lat::float8 AS lat,
            p.elevation, p.capacity, true AS inside
@@ -59,6 +63,8 @@ export async function searchPointsOfInterest(query: string): Promise<PointSearch
     WHERE p.kind IN ('HUT', 'CABIN', 'SHELTER', 'PEAK') AND p.name ILIKE '%' || $1 || '%'
     ORDER BY p.name ILIKE $1 || '%' DESC, array_position(ARRAY['HUT', 'CABIN', 'SHELTER', 'PEAK'], p.kind::text), p.name
     LIMIT 12
-  `, [pattern])
+  `,
+    [pattern],
+  )
   return rows.map(({ areaId, ...point }) => ({ areaId, point }))
 }
diff --git a/server/services/routeStops.ts b/server/services/routeStops.ts
new file mode 100644
index 0000000..82a99ca
--- /dev/null
+++ b/server/services/routeStops.ts
@@ -0,0 +1,137 @@
+import { GraphQLError } from 'graphql'
+import { pool, withTransaction } from '../db/db.ts'
+import { sampleRoute } from './elevation.ts'
+
+const kinds = [
+  'alpine_hut',
+  'wilderness_hut',
+  'chalet',
+  'shelter',
+  'lean_to',
+  'viewpoint',
+  'picnic_site',
+  'toilets',
+  'drinking_water',
+  'parking',
+  'camp_site',
+  'peak',
+]
+const facilityGroups: Record<string, string[]> = {
+  hut: ['alpine_hut', 'wilderness_hut', 'chalet'],
+  shelter: ['shelter', 'lean_to'],
+  viewpoint: ['viewpoint'],
+  picnic_site: ['picnic_site'],
+  toilets: ['toilets'],
+  drinking_water: ['drinking_water'],
+  parking: ['parking'],
+  camp_site: ['camp_site'],
+  peak: ['peak'],
+}
+const facilityCache = new Map<string, { ids: string[]; expires: number }>()
+const facilityPending = new Map<string, Promise<string[]>>()
+let facilityIndexReady: Promise<void> | null
+async function ensureFacilityIndex() {
+  if (!facilityIndexReady)
+    facilityIndexReady = (async () => {
+      await withTransaction(async (client) => {
+        await client.query("SET LOCAL statement_timeout='60s'")
+        await client.query(`CREATE MATERIALIZED VIEW IF NOT EXISTS norwegian_explorer_app.route_facility_segments AS
+        SELECT id,ST_Transform(part,4326)::geography geog FROM (
+          SELECT id,ST_Subdivide(geom,128) part FROM norwegian_explorer_app.route_catalog
+          UNION ALL SELECT id,ST_Subdivide(geom,128) part FROM norwegian_explorer_app.route_loops
+        ) parts`)
+        await client.query(
+          'CREATE INDEX IF NOT EXISTS route_facility_segments_geog_idx ON norwegian_explorer_app.route_facility_segments USING gist(geog)',
+        )
+        await client.query('ANALYZE norwegian_explorer_app.route_facility_segments')
+      })
+    })().catch((error) => {
+      facilityIndexReady = null
+      throw error
+    })
+  await facilityIndexReady
+}
+async function loadFacilityRouteIds(facility: string) {
+  if (!Object.hasOwn(facilityGroups, facility))
+    throw new GraphQLError('Ugyldig kategori for steder nær ruten.')
+  const cached = facilityCache.get(facility)
+  if (cached && cached.expires > Date.now()) return cached.ids
+  await ensureFacilityIndex()
+  const ids = new Set<string>()
+  for (let offset = 0; ; offset += 5000) {
+    const { rows } = await pool.query(
+      `WITH places AS MATERIALIZED (
+    SELECT ST_PointOnSurface(geom)::geography point FROM osm_import.objects
+    WHERE category='place' AND NOT ST_IsEmpty(geom)
+      AND coalesce(tags->>'tourism',tags->>'amenity',tags->>'natural')=ANY($1::text[])
+      AND coalesce(tags->>'access','') NOT IN ('no','private') AND coalesce(tags->>'foot','') NOT IN ('no','private')
+    ORDER BY osm_type,osm_id LIMIT 5000 OFFSET $2
+  ) SELECT (SELECT count(*)::int FROM places) count, ARRAY(SELECT DISTINCT s.id FROM places p
+    JOIN norwegian_explorer_app.route_facility_segments s ON ST_DWithin(s.geog,p.point,500)) ids`,
+      [facilityGroups[facility], offset],
+    )
+    for (const id of rows[0].ids) ids.add(id)
+    if (rows[0].count < 5000) break
+  }
+  const result = [...ids]
+  facilityCache.set(facility, { ids: result, expires: Date.now() + 600000 })
+  return result
+}
+export async function nearbyFacilityRouteIds(facility: string) {
+  if (!Object.hasOwn(facilityGroups, facility))
+    throw new GraphQLError('Ugyldig kategori for steder nær ruten.')
+  if (!facilityPending.has(facility))
+    facilityPending.set(
+      facility,
+      loadFacilityRouteIds(facility).finally(() => facilityPending.delete(facility)),
+    )
+  return facilityPending.get(facility)
+}
+export async function routeStops(geojson: string, ids: string[] | null = null) {
+  if (ids && ids.length === 0) return { stops: [], truncated: false }
+  sampleRoute(geojson)
+  if (
+    ids &&
+    (ids.length > 20 ||
+      ids.some((id) => !/^([nw])\/[0-9]+$/.test(id)) ||
+      new Set(ids).size !== ids.length)
+  )
+    throw new GraphQLError('Velg maks 20 forskjellige stopp.')
+  const { rows } = await pool.query(
+    `WITH route AS (
+    SELECT ST_SetSRID(ST_GeomFromGeoJSON($1),4326) geom
+  ), candidates AS (
+    SELECT o.osm_type || '/' || o.osm_id::text id,o.name,o.tags,ST_PointOnSurface(o.geom) point,r.geom route,
+      coalesce(o.tags->>'tourism',o.tags->>'amenity',o.tags->>'natural') kind
+    FROM osm_import.objects o CROSS JOIN route r
+    WHERE o.category='place' AND NOT ST_IsEmpty(o.geom)
+      AND o.geom && ST_Expand(r.geom,0.05)
+      AND coalesce(o.tags->>'access','') NOT IN ('no','private')
+      AND coalesce(o.tags->>'foot','') NOT IN ('no','private')
+      AND ($2::text[] IS NULL OR o.osm_type || '/' || o.osm_id::text=ANY($2))
+  ), nearby AS (
+    SELECT *,ST_Distance(point::geography,route::geography) AS distance
+    FROM candidates WHERE kind=ANY($3::text[])
+      AND ST_DWithin(point::geography,route::geography,500)
+  ) SELECT id,name,kind,ST_X(point) lon,ST_Y(point) lat,distance AS "distanceFromRouteMeters",
+    ST_LineLocatePoint(ST_Transform(route,25833),ST_Transform(point,25833))*ST_Length(route::geography) AS "distanceFromStartMeters",
+    tags->>'operator' operator,tags->>'opening_hours' AS "openingHours",tags->>'capacity' capacity,
+    tags->>'fee' fee,coalesce(tags->>'website',tags->>'contact:website') website
+  FROM nearby ORDER BY distance,id LIMIT 201`,
+    [geojson, ids, kinds],
+  )
+  const stops = rows
+    .slice(0, 200)
+    .map((row) => ({
+      ...row,
+      website: row.website && /^https?:\/\//i.test(row.website) ? row.website : null,
+    }))
+    .sort(
+      (a, b) => a.distanceFromStartMeters - b.distanceFromStartMeters || a.id.localeCompare(b.id),
+    )
+  if (ids && stops.length !== ids.length)
+    throw new GraphQLError(
+      'Et valgt stopp finnes ikke lenger eller ligger mer enn 500 meter fra den nye ruten. Oppdater stoppene før lagring.',
+    )
+  return { stops, truncated: rows.length > 200 }
+}
diff --git a/src/App.css b/src/App.css
index 8dc9638..4a0b19e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,68 @@
-header{height:90px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce1d7;background:#fff}main{max-width:1450px;margin:auto;padding:44px 5% 20px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#557365}h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2px;margin:10px 0}dl{margin:0}dl>div{padding:13px 0;border-top:1px solid #e9ece5}dt{font-size:12px;color:#647267;margin-bottom:5px}dd{margin:0;font-size:14px;font-weight:500}.map{position:absolute;inset:0}footer{font-size:11px;color:#687669;margin:24px 0}.skip-link{position:absolute;top:-100px;left:10px;padding:10px;background:white;z-index:10}.skip-link:focus{top:10px}@media(max-width:800px){header{height:72px}main{padding-top:28px}}
-
-button:disabled{opacity:.4;cursor:default}input:focus-visible{outline:3px solid #c27730;outline-offset:3px}
+header {
+  height: 90px;
+  padding: 0 5%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #dce1d7;
+  background: #fff;
+}
+main {
+  max-width: 1450px;
+  margin: auto;
+  padding: 44px 5% 20px;
+}
+.eyebrow {
+  font-size: 11px;
+  letter-spacing: 2px;
+  font-weight: 700;
+  color: #557365;
+}
+h1 {
+  font-size: clamp(34px, 5vw, 58px);
+  letter-spacing: -2px;
+  margin: 10px 0;
+}
+dl {
+  margin: 0;
+}
+dl > div {
+  padding: 13px 0;
+  border-top: 1px solid #e9ece5;
+}
+dt {
+  font-size: 12px;
+  color: #647267;
+  margin-bottom: 5px;
+}
+dd {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+.map {
+  position: absolute;
+  inset: 0;
+}
+footer {
+  font-size: 11px;
+  color: #687669;
+  margin: 24px 0;
+}
+@media (max-width: 800px) {
+  header {
+    height: 72px;
+  }
+  main {
+    padding-top: 28px;
+  }
+}
 
+button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+input:focus-visible {
+  outline: 3px solid #c27730;
+  outline-offset: 3px;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 894fa0f..ea9bbf3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,53 +1,194 @@
-import SiteNav from './SiteNav'
+import SiteNav from './components/SiteNav/SiteNav'
+import SkipLink from './components/SkipLink/SkipLink'
 import { useCallback, useEffect, useState } from 'react'
 import 'maplibre-gl/dist/maplibre-gl.css' // før App.css, slik at våre regler for kartet vinner
 import './App.css'
-import Explore from './Explore/Explore'
-import type { SelectedRoute } from './Explore/routeTypes'
-import Home from './Home'
-import {graphql,TOKEN_KEY} from './graphql'
-import Profile, { AuthGate } from './Profile'
+import Explore from './features/Explore/Explore'
+import type { SelectedRoute } from './lib/routeTypes'
+import Home from './pages/Home/Home'
+import { checkSession, TOKEN_KEY } from './lib/graphql'
+import AuthGate from './pages/Profile/AuthGate'
+import Profile from './pages/Profile/Profile'
 
 export default function App() {
-  const [view,setView] = useState<'explore'|'profile'>(()=>window.location.hash.startsWith('#profile')?'profile':'explore')
-  const [showHome,setShowHome]=useState(()=>!(window.location.hash==='#explore' || window.location.hash.startsWith('#profile') || window.location.hash.startsWith('#reset-password/')))
-  const [showLogin,setShowLogin]=useState(()=>window.location.hash.startsWith('#reset-password/'))
-  const [guest,setGuest]=useState(()=>window.location.hash==='#explore' || (window.location.hash.startsWith('#profile') && Boolean(localStorage.getItem(TOKEN_KEY))))
+  const [view, setView] = useState<'explore' | 'profile'>(() =>
+    window.location.hash.startsWith('#profile') ? 'profile' : 'explore',
+  )
+  const [showHome, setShowHome] = useState(
+    () =>
+      !(
+        window.location.hash === '#explore' ||
+        window.location.hash.startsWith('#profile') ||
+        window.location.hash.startsWith('#reset-password/')
+      ),
+  )
+  const [showLogin, setShowLogin] = useState(() =>
+    window.location.hash.startsWith('#reset-password/'),
+  )
+  const [guest, setGuest] = useState(
+    () =>
+      window.location.hash === '#explore' ||
+      (window.location.hash.startsWith('#profile') && Boolean(localStorage.getItem(TOKEN_KEY))),
+  )
   const [authenticated, setAuthenticated] = useState(false)
-  const handleAuthenticated = useCallback(() => {setAuthenticated(true);setGuest(false);setShowLogin(false)}, [])
-  const handleLogout = useCallback(() => {setAuthenticated(false);setGuest(false);setShowLogin(false);setShowHome(true)}, [])
-  useEffect(()=>{
-    const token=localStorage.getItem(TOKEN_KEY)
-    if(!token)return
-    const controller=new AbortController()
-    void graphql<{me:{username:string}|null}>('query($token:String!){me(token:$token){username}}',{token},controller.signal)
-      .then(data=>{if(!controller.signal.aborted&&localStorage.getItem(TOKEN_KEY)===token){setAuthenticated(Boolean(data.me));if(!data.me)localStorage.removeItem(TOKEN_KEY)}}).catch(()=>undefined)
-    return ()=>controller.abort()
-  },[])
+  const handleAuthenticated = useCallback(() => {
+    setAuthenticated(true)
+    setGuest(false)
+    setShowLogin(false)
+  }, [])
+  const handleLogout = useCallback(() => {
+    setAuthenticated(false)
+    setGuest(false)
+    setShowLogin(false)
+    setShowHome(true)
+  }, [])
+  useEffect(() => {
+    const controller = new AbortController()
+    checkSession(controller.signal)
+      .then((valid) => {
+        if (valid !== null && !controller.signal.aborted) setAuthenticated(valid)
+      })
+      .catch(() => undefined)
+    return () => controller.abort()
+  }, [])
   // Valgt tur deles mellom Utforsk, forsiden og profilen, derfor ligger den her
   const [selected, setSelected] = useState<SelectedRoute | null>(null)
-  const [loadedRoute, setLoadedRoute] = useState<{ id: string; name: string; number: string } | null>(null)
+  const [loadedRoute, setLoadedRoute] = useState<{
+    id: string
+    name: string
+    number: string
+  } | null>(null)
   function openRoute(item: SelectedRoute) {
     setView('explore')
     setSelected({ ...item })
     // Turen vises i panelet oppå kartet, som ligger øverst på Utforsk-siden
     window.requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: 'smooth' }))
   }
-  if(showLogin&&(!authenticated||window.location.hash.startsWith('#reset-password/')))return <AuthGate onAuthenticated={handleAuthenticated} onHome={()=>{setShowLogin(false);setShowHome(true)}} onSkip={()=>{setGuest(true);setShowLogin(false);setShowHome(false);setView('explore')}} />
-  if(showHome)return <Home authenticated={authenticated} onExploreClick={()=>{setGuest(!authenticated);setShowHome(false);setView('explore')}} onProfileClick={()=>{setView('profile');setShowHome(false)}} onLoginClick={()=>setShowLogin(true)} onSelectRoute={item=>{openRoute(item);setGuest(!authenticated);setShowHome(false)}} />
-  if(!authenticated&&!guest)return <AuthGate onAuthenticated={handleAuthenticated} onHome={()=>setShowHome(true)} onSkip={()=>{setGuest(true);setView('explore')}} />
+  if (showLogin && (!authenticated || window.location.hash.startsWith('#reset-password/')))
+    return (
+      <AuthGate
+        onAuthenticated={handleAuthenticated}
+        onHome={() => {
+          setShowLogin(false)
+          setShowHome(true)
+        }}
+        onSkip={() => {
+          setGuest(true)
+          setShowLogin(false)
+          setShowHome(false)
+          setView('explore')
+        }}
+      />
+    )
+  if (showHome)
+    return (
+      <Home
+        authenticated={authenticated}
+        onExploreClick={() => {
+          setGuest(!authenticated)
+          setShowHome(false)
+          setView('explore')
+        }}
+        onProfileClick={() => {
+          setView('profile')
+          setShowHome(false)
+        }}
+        onLoginClick={() => setShowLogin(true)}
+        onSelectRoute={(item) => {
+          openRoute(item)
+          setGuest(!authenticated)
+          setShowHome(false)
+        }}
+      />
+    )
+  if (!authenticated && !guest)
+    return (
+      <AuthGate
+        onAuthenticated={handleAuthenticated}
+        onHome={() => setShowHome(true)}
+        onSkip={() => {
+          setGuest(true)
+          setView('explore')
+        }}
+      />
+    )
 
-  return <div className="explore-app">
-    <a className="skip-link" href="#main">Hopp til ruteinformasjon</a>
-    <SiteNav active={view} authenticated={authenticated} onHome={()=>setShowHome(true)} onExplore={()=>{setView('explore');window.scrollTo({top:0,behavior:'smooth'})}} onProfile={()=>{if(!authenticated){setGuest(false);setShowLogin(true)}setView('profile');window.scrollTo({top:0,behavior:'smooth'})}} />
-    <main id="main">
-      <div hidden={view!=='explore'}>
-        <Explore selected={selected} onSelect={setSelected} onDeselect={() => setSelected(null)} onRouteLoaded={setLoadedRoute} authenticated={authenticated} onSaveRoute={()=>{if(!authenticated){setGuest(false);setShowLogin(true)}setView('profile')}} />
-      </div>
-      <div hidden={view!=='profile'}><div className="profile-page-title"><p className="eyebrow">DITT EGET TURUNIVERS</p><h1>Min profil.</h1><p>Favorittene dine, turene dine og neste eventyr.</p></div>
-      {authenticated&&<Profile selected={loadedRoute && selected && loadedRoute.name === selected.name && loadedRoute.number === selected.number ? loadedRoute : selected} disabled={false} onExplore={()=>{setView('explore');window.location.hash='explore';requestAnimationFrame(()=>{const input=document.getElementById('esp-input');input?.scrollIntoView({behavior:'smooth',block:'center'});input?.focus({preventScroll:true})})}} onSelectRoute={openRoute} onLogout={handleLogout} />}
-      </div>
-      <footer><>Rutedata: <a href="https://kartverket.no/api-og-data/friluftsliv">Kartverket</a> · <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. Rutelinjen er bearbeidet fra originale rutedeler.</></footer>
-    </main>
-  </div>
+  return (
+    <div className="explore-app">
+      <SkipLink>Hopp til ruteinformasjon</SkipLink>
+      <SiteNav
+        active={view}
+        authenticated={authenticated}
+        onHome={() => setShowHome(true)}
+        onExplore={() => {
+          setView('explore')
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+        onProfile={() => {
+          if (!authenticated) {
+            setGuest(false)
+            setShowLogin(true)
+          }
+          setView('profile')
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+      <main id="main">
+        <div hidden={view !== 'explore'}>
+          <Explore
+            selected={selected}
+            onSelect={setSelected}
+            onDeselect={() => setSelected(null)}
+            onRouteLoaded={setLoadedRoute}
+            authenticated={authenticated}
+            onSaveRoute={() => {
+              if (!authenticated) {
+                setGuest(false)
+                setShowLogin(true)
+              }
+              setView('profile')
+            }}
+          />
+        </div>
+        <div hidden={view !== 'profile'}>
+          <div className="profile-page-title">
+            <p className="eyebrow">DITT EGET TURUNIVERS</p>
+            <h1>Min profil.</h1>
+            <p>Favorittene dine, turene dine og neste eventyr.</p>
+          </div>
+          {authenticated && (
+            <Profile
+              selected={
+                loadedRoute &&
+                selected &&
+                loadedRoute.name === selected.name &&
+                loadedRoute.number === selected.number
+                  ? loadedRoute
+                  : selected
+              }
+              disabled={false}
+              onExplore={() => {
+                setView('explore')
+                window.location.hash = 'explore'
+                requestAnimationFrame(() => {
+                  const input = document.getElementById('esp-input')
+                  input?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                  input?.focus({ preventScroll: true })
+                })
+              }}
+              onSelectRoute={openRoute}
+              onLogout={handleLogout}
+            />
+          )}
+        </div>
+        <footer>
+          <>
+            Rutedata: <a href="https://kartverket.no/api-og-data/friluftsliv">Kartverket</a> ·{' '}
+            <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. Rutelinjen er
+            bearbeidet fra originale rutedeler.
+          </>
+        </footer>
+      </main>
+    </div>
+  )
 }
diff --git a/src/ElevationProfile.css b/src/ElevationProfile.css
deleted file mode 100644
index 51a9890..0000000
--- a/src/ElevationProfile.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.elevation-panel { margin: 24px 0; padding: 20px; background: #fff; border: 1px solid #dce1d7; border-radius: 12px; }
-.elevation-panel h3 { margin-top: 0; }
-.elevation-panel svg { display: block; width: 100%; max-width: 900px; margin: 20px 0; }
-.elevation-panel svg text { fill: #647267; font-size: 11px; }
-.elevation-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
-.elevation-stats strong,.elevation-stats span { display: block; }
-.elevation-stats span { color: #647267; font-size: 12px; margin-top: 6px; }
-.elevation-slider { display: grid; gap: 8px; font-size: 13px; }
-.elevation-slider input { width: 100%; accent-color: #126b51; }
-.elevation-table { overflow: auto; max-height: 300px; }
-.elevation-table table { border-collapse: collapse; width: 100%; }
-.elevation-table td,.elevation-table th { text-align: left; padding: 8px; border-bottom: 1px solid #dce1d7; }
-@media(max-width:600px){.elevation-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
diff --git a/src/ElevationProfile.tsx b/src/ElevationProfile.tsx
deleted file mode 100644
index a008110..0000000
--- a/src/ElevationProfile.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {useEffect,useRef,useState} from 'react'
-import {graphql} from './graphql'
-import './ElevationProfile.css'
-
-type Point={distanceMeters:number;elevation:number|null}
-type Profile={points:Point[];lengthMeters:number;sampleIntervalMeters:number;ascentMeters:number|null;descentMeters:number|null;minElevation:number|null;maxElevation:number|null;complete:boolean;missingCount:number;source:string}
-function meters(value:number|null){return value==null?'Ikke tilgjengelig':`${Math.round(value).toLocaleString('nb-NO')} m`}
-
-export default function ElevationProfile({geojson}:{geojson:string}){
-  const [result,setResult]=useState<{geojson:string;profile:Profile}|null>(null)
-  const [error,setError]=useState<{geojson:string;text:string}|null>(null)
-  const [busyGeo,setBusyGeo]=useState<string|null>(null)
-  const [selected,setSelected]=useState(0)
-  const request=useRef<AbortController|null>(null)
-  useEffect(()=>()=>request.current?.abort(),[geojson])
-  const profile=result?.geojson===geojson?result.profile:null
-  const busy=busyGeo===geojson
-  let connected=false
-  try{connected=JSON.parse(geojson).type==='LineString'}catch{ /* A malformed route cannot have a profile. */ }
-
-  async function load(){
-    request.current?.abort();const controller=new AbortController();request.current=controller
-    const token=localStorage.getItem('norwegian-explorer-session')||''
-    setBusyGeo(geojson);setError(null)
-    try{
-      const data=await graphql<{elevationProfile:Profile}>('query($token:String!,$geojson:String!){elevationProfile(token:$token,geojson:$geojson){points{distanceMeters elevation} lengthMeters sampleIntervalMeters ascentMeters descentMeters minElevation maxElevation complete missingCount source}}',{token,geojson},AbortSignal.any([controller.signal,AbortSignal.timeout(25000)]))
-      if(!controller.signal.aborted){setResult({geojson,profile:data.elevationProfile});setSelected(0)}
-    }catch(err){if(!controller.signal.aborted)setError({geojson,text:err instanceof Error?err.message:'Kunne ikke hente høydeprofil.'})}
-    finally{if(request.current===controller)setBusyGeo(null)}
-  }
-  const low=(profile?.minElevation??0)-5,high=(profile?.maxElevation??0)+5
-  const x=(distance:number)=>48+distance/(profile?.lengthMeters||1)*564
-  const y=(elevation:number)=>176-(elevation-low)/(high-low)*144
-  let path='',pen=false
-  if(profile)for(const point of profile.points){if(point.elevation==null){pen=false;continue}path+=`${pen?'L':'M'}${x(point.distanceMeters).toFixed(2)},${y(point.elevation).toFixed(2)} `;pen=true}
-  const point=profile?.points[Math.min(selected,(profile?.points.length||1)-1)]
-  return <section className="elevation-panel" aria-label="Høydeprofil">
-    <h3>Høydeprofil</h3>
-    {!connected?<p>Velg en sammenhengende rute eller rutevariant for å vise høydeprofil. Flere adskilte kartlinjer har ingen entydig turrekkefølge.</p>:<>
-      <p>Høydene hentes fra Kartverket når du trykker på knappen. Utvalgte rutekoordinater sendes til tjenesten.</p>
-      <button disabled={busy} onClick={()=>void load()}>{busy?'Henter høyder …':profile?'Oppdater høydeprofil':'Hent høydeprofil'}</button>
-      {busy&&<p role="status">Henter terrenghøyder langs ruten …</p>}
-      {error?.geojson===geojson&&<p role="alert">{error.text}</p>}
-      {profile&&<>
-        <div className="elevation-stats"><div><strong>{meters(profile.ascentMeters)}</strong><span>Opp</span></div><div><strong>{meters(profile.descentMeters)}</strong><span>Ned</span></div><div><strong>{meters(profile.minElevation)}</strong><span>Laveste målte punkt</span></div><div><strong>{meters(profile.maxElevation)}</strong><span>Høyeste målte punkt</span></div></div>
-        <svg viewBox="0 0 640 220" role="img" aria-label={`Høydekurve langs ${(profile.lengthMeters/1000).toFixed(1)} kilometer rute`}>
-          <line x1="48" y1="176" x2="612" y2="176" stroke="#9cac9e"/><line x1="48" y1="32" x2="48" y2="176" stroke="#9cac9e"/>
-          <text x="6" y="32">{Math.round(high)} m</text><text x="6" y="176">{Math.round(low)} m</text><text x="48" y="204">0 km</text><text x="612" y="204" textAnchor="end">{(profile.lengthMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:1})} km</text>
-          <path d={path} fill="none" stroke="#126b51" strokeWidth="3"/>
-          {point?.elevation!=null&&<circle cx={x(point.distanceMeters)} cy={y(point.elevation)} r="5" fill="#be6426"/>}
-        </svg>
-        <label className="elevation-slider">Utforsk høydekurven<input type="range" min="0" max={profile.points.length-1} value={Math.min(selected,profile.points.length-1)} onChange={event=>setSelected(Number(event.target.value))}/></label>
-        {point&&<p>{(point.distanceMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km fra start · {meters(point.elevation)} over havet</p>}
-        {!profile.complete&&<p role="status">Høyde mangler for {profile.missingCount} punkter. Kurven har hull, og samlet opp/ned vises ikke.</p>}
-        <p className="stats-help">Omtrentlige terrenghøyder med cirka {Math.round(profile.sampleIntervalMeters)} meter mellom målepunktene. Stigning og høyeste/laveste punkt er estimater fra utvalget og kan overse korte bakker. <a href="https://ws.geonorge.no/hoydedata/v1/" target="_blank" rel="noreferrer">Kilde: {profile.source}</a>.</p>
-        <details><summary>Høydene som tabell</summary><div className="elevation-table"><table><thead><tr><th>Fra start (km)</th><th>Høyde (m)</th></tr></thead><tbody>{profile.points.map((p,i)=><tr key={i}><td>{(p.distanceMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})}</td><td>{p.elevation==null?'Mangler':Math.round(p.elevation)}</td></tr>)}</tbody></table></div></details>
-      </>}
-    </>}
-  </section>
-}
diff --git a/src/Explore/Explore.css b/src/Explore/Explore.css
deleted file mode 100644
index 53df50a..0000000
--- a/src/Explore/Explore.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.explore-app,.auth-page{--ink:#23382c;--muted:#758075;--green:#435d47;--line:#e3e8df;--paper:#fafbf8;font-family:'Avenir Next',system-ui,sans-serif;color:var(--ink);background:var(--paper)}
-.explore-app [hidden]{display:none!important}
-.explore-app>header,.auth-page>header{height:86px;padding:0 max(5%,calc((100vw - 1320px)/2));background:var(--paper);border-bottom:1px solid var(--line)}
-
-.explore-app button,.auth-page button{background:var(--green);border-radius:9px;font-weight:600;padding:12px 18px;transition:background .15s,transform .15s}
-.explore-app button:hover:not(:disabled),.auth-page button:hover:not(:disabled){background:#304c37}
-
-.explore-app main{max-width:1432px;padding:24px 56px 24px}
-
-.visually-hidden{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
-
-.explore-app .text-button{background:transparent;color:var(--green)}.explore-app .text-button:hover:not(:disabled){background:transparent;color:#263c2b}
-.profile-page-title{margin:32px 0}.profile-page-title h1{font-size:44px;letter-spacing:-1.6px}.profile-page-title>p:last-child{color:var(--muted);font-size:14px}
-.explore-app .profile-panel{margin-top:24px;border-radius:12px;padding:30px}.explore-app .profile-tabs button{background:#eef2ea;color:var(--ink)}
-.auth-page{background:#f4f6ef}.auth-main{padding:48px 24px}.auth-card{border-radius:14px;box-shadow:0 16px 45px #243a3010;padding:42px}.auth-intro h1{font-family:'Avenir Next',system-ui,sans-serif;font-size:44px;font-weight:600;letter-spacing:-1.8px}.auth-card .profile-form input{background:#fafbf8;border-color:#dce3d5;padding:14px}.auth-card .text-button{background:transparent;color:var(--green)}
-@media(max-width:1050px){.explore-app main{padding:20px 28px}}
-@media(max-width:720px){.explore-app>header,.auth-page>header{padding:0 20px;height:74px}.explore-app main{padding:16px}.auth-card{padding:28px}.explore-app .profile-panel{padding:20px}}
-
-@media(prefers-reduced-motion:reduce){.explore-app button{transition:none}}
-/* Give closed native selects the same appearance across browsers. */
-.explore-app select{
-  -webkit-appearance:none;appearance:none;
-  display:block;max-width:100%;min-height:46px;
-  padding:12px 42px 12px 14px!important;
-  border:1px solid #d9e1d3!important;border-radius:9px!important;
-  background-color:#fff!important;
-  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23566b50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
-  background-repeat:no-repeat!important;background-position:right 14px center!important;
-  color:#293e2e!important;font-family:inherit;font-size:13px!important;line-height:1.4;
-  box-shadow:none;cursor:pointer;
-}
-.explore-app select:hover{border-color:#9bad91!important}
-.explore-app select:focus-visible{outline:2px solid #677f5d;outline-offset:3px}
-.explore-app select:disabled{opacity:.5;cursor:default}
-
diff --git a/src/Explore/ExploreFilters.css b/src/Explore/ExploreFilters.css
deleted file mode 100644
index 0904947..0000000
--- a/src/Explore/ExploreFilters.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/* Filterraden øverst i kartet (ExploreFilters.tsx). Ligger til høyre for søkepanelet på stor skjerm. */
-.ef { position: absolute; z-index: 3; top: 16px; left: 432px; right: 64px; font-family: 'Avenir Next', system-ui, sans-serif; pointer-events: none; }
-.ef-row, .ef-menu { pointer-events: auto; }
-.ef-row { display: flex; gap: 8px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
-.ef-row::-webkit-scrollbar { display: none; }
-.explore-app .ef-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #23382c; border: 1px solid #dce3d5; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 10px #23382c1f; }
-.explore-app .ef-pill:hover:not(:disabled), .explore-app .ef-pill[aria-expanded=true] { background: #f4f7f1; border-color: #a2b398; }
-.explore-app .ef-pill[data-active] { background: #435d47; border-color: #435d47; color: #fff; }
-.explore-app .ef-pill[data-active]:hover:not(:disabled) { background: #304c37; }
-.explore-app .ef-reset { color: #435d47; }
-.ef-pill svg { transition: transform .15s; }
-.ef-pill[aria-expanded=true] svg { transform: rotate(180deg); }
-.ef-menu { position: absolute; top: calc(100% + 8px); width: min(340px, 100%); max-height: min(480px, calc(100vh - 220px)); overflow-y: auto; padding: 16px; background: #fff; color: #23382c; border-radius: 14px; box-shadow: 0 12px 36px #23382c38; }
-.ef-menu h3 { margin: 0 0 12px; font-size: 14px; }
-.ef-options { display: flex; flex-wrap: wrap; gap: 8px; }
-.ef-options.ef-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.ef-options.ef-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.ef-options.ef-stack { display: grid; }
-.explore-app .ef-option { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; color: #23382c; border: 1px solid #dce3d5; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 500; }
-.explore-app .ef-option:hover:not(:disabled) { background: #f4f7f1; border-color: #a2b398; }
-.explore-app .ef-option[aria-pressed=true] { background: #eef3e9; border-color: #435d47; box-shadow: inset 0 0 0 1px #435d47; }
-.ef-option small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #6b7768; }
-.ef-option svg { flex-shrink: 0; color: #435d47; }
-.ef-length-form { display: flex; align-items: end; gap: 8px; margin-top: 14px; }
-.ef-length-form label { flex: 1; display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: #6b7768; }
-.ef-length-form input { width: 100%; min-width: 0; font: inherit; font-size: 13px; color: #23382c; border: 1px solid #dce3d5; border-radius: 9px; padding: 9px 10px; }
-.explore-app .ef-length-form button { font-size: 12px; padding: 10px 14px; }
-.ef-note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: #6b7768; }
-.ef-menu-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e3e8df; }
-.explore-app .ef-menu-footer .text-button { padding: 0; font-size: 13px; }
-.explore-app .ef-menu-footer button:last-child { font-size: 13px; padding: 9px 16px; }
-@media (max-width: 720px) { .ef { top: 10px; left: 10px; right: 56px; } .ef-options.ef-grid-3 { grid-template-columns: 1fr; } }
-@media (prefers-reduced-motion: reduce) { .ef-pill svg { transition: none; } }
diff --git a/src/Explore/ExploreFilters.tsx b/src/Explore/ExploreFilters.tsx
deleted file mode 100644
index 08a2425..0000000
--- a/src/Explore/ExploreFilters.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-// Filterknappene øverst i kartet på Utforsk turer: Vanskelighetsgrad, Lengde, Turtype og Langs turen.
-// Hver knapp åpner en liten meny. Endringer gjelder med en gang og påvirker både turene i kartutsnittet
-// og turforslagene i søket. Selve filtreringen skjer i databasen (routes-spørringen).
-// En knapp med aktivt filter blir fylt og viser hva som er valgt, så man ser det uten å åpne menyen.
-import { useEffect, useRef, useState } from 'react'
-import { placeCategories } from '../placeCategories'
-import { EMPTY_FILTERS, type RouteFilterValue } from './routeTypes'
-import './ExploreFilters.css'
-
-type MenuId = 'difficulty' | 'length' | 'routeType' | 'facilities'
-
-const DIFFICULTIES = ['Enkel', 'Middels', 'Krevende', 'Ekspert', 'Ikke gradert']
-const ROUTE_TYPES = [
-  { value: 'Avledet rundtur', label: 'Rundtur', hint: 'Starter og slutter på samme sted' },
-  { value: 'Hovedrute', label: 'Hovedrute', hint: 'Registrerte hovedtraséer' },
-  { value: 'Materute', label: 'Materute', hint: 'Ruter inn til hovedruter' },
-]
-const LENGTH_PRESETS: { label: string; hint: string; min: number | null; max: number | null }[] = [
-  { label: 'Kort', hint: 'Under 5 km', min: null, max: 5 },
-  { label: 'Mellomlang', hint: '5–15 km', min: 5, max: 15 },
-  { label: 'Lang', hint: 'Over 15 km', min: 15, max: null },
-]
-/** Enkle strekikoner (24×24) for stedstypene i placeCategories */
-const ICONS: Record<string, string> = {
-  hut: 'M3 11 12 4l9 7M5 9.5V20h14V9.5M10 20v-5h4v5',
-  shelter: 'M3 20 13 5l8 15M2 20h20M9 20l4-6',
-  viewpoint: 'M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12ZM12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z',
-  picnic_site: 'M3 9h18M7 9l-3 10M17 9l3 10M5.5 14h13M12 9V5',
-  toilets: 'M7 3.5a1.5 1.5 0 1 0 0 .01M17 3.5a1.5 1.5 0 1 0 0 .01M5 21v-6H4l1.5-7h3L10 15H9v6M15 21V8h4v13',
-  drinking_water: 'M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11Z',
-  parking: 'M5 3h14v18H5zM10 17V7h3a3 3 0 0 1 0 6h-3',
-  camp_site: 'M2 20h20M4 20 12 5l8 15M12 20l-3-5M12 20l3-5',
-  peak: 'M2 20 9 8l4 6 3-4 6 10H2Z',
-}
-
-/** Hva «Nullstill» i hver meny setter tilbake */
-const CLEARED: Record<MenuId, Partial<RouteFilterValue>> = {
-  difficulty: { difficulties: [] }, length: { minLength: null, maxLength: null }, routeType: { routeTypes: [] }, facilities: { facilities: [] },
-}
-
-const fmt = (value: number) => value.toLocaleString('nb-NO')
-function toggle(list: string[], value: string) { return list.includes(value) ? list.filter(item => item !== value) : [...list, value] }
-/** «Enkel, Middels» eller «Enkel +2» */
-function summary(values: string[], labelOf: (value: string) => string = value => value) {
-  if (!values.length) return null
-  return values.length <= 2 ? values.map(labelOf).join(', ') : `${labelOf(values[0])} +${values.length - 1}`
-}
-function lengthSummary(min: number | null, max: number | null) {
-  if (min == null && max == null) return null
-  if (min == null) return `Under ${fmt(max!)} km`
-  if (max == null) return `Over ${fmt(min)} km`
-  return `${fmt(min)}–${fmt(max)} km`
-}
-const routeTypeLabel = (value: string) => ROUTE_TYPES.find(type => type.value === value)?.label ?? value
-const facilityLabel = (value: string) => placeCategories.find(category => category.value === value)?.label ?? value
-
-type Props = { value: RouteFilterValue; onChange: (next: RouteFilterValue) => void }
-
-export default function ExploreFilters({ value, onChange }: Props) {
-  const [open, setOpen] = useState<MenuId | null>(null)
-  /** Hvor menyen plasseres, i piksler fra venstre kant av filterraden */
-  const [anchor, setAnchor] = useState(0)
-  const [minInput, setMinInput] = useState('')
-  const [maxInput, setMaxInput] = useState('')
-  const wrapRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const buttonRefs = useRef<Partial<Record<MenuId, HTMLButtonElement | null>>>({})
-
-  // Lukk menyen ved klikk utenfor eller Escape (samme mønster som profilmenyen i SiteNav)
-  useEffect(() => {
-    if (!open) return
-    const close = (event: PointerEvent) => { if (!wrapRef.current?.contains(event.target as Node)) setOpen(null) }
-    const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') { setOpen(null); buttonRefs.current[open]?.focus() } }
-    document.addEventListener('pointerdown', close)
-    document.addEventListener('keydown', escape)
-    // Flytt fokus inn i menyen, så tastaturbrukere kommer rett til valgene
-    const frame = window.requestAnimationFrame(() => menuRef.current?.querySelector<HTMLElement>('button, input')?.focus())
-    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', escape); window.cancelAnimationFrame(frame) }
-  }, [open])
-
-  function toggleMenu(id: MenuId) {
-    if (open === id) { setOpen(null); return }
-    const button = buttonRefs.current[id], wrap = wrapRef.current
-    if (button && wrap) {
-      const left = button.getBoundingClientRect().left - wrap.getBoundingClientRect().left
-      setAnchor(Math.max(0, Math.min(left, wrap.clientWidth - 340)))
-    }
-    if (id === 'length') { setMinInput(value.minLength?.toString() ?? ''); setMaxInput(value.maxLength?.toString() ?? '') }
-    setOpen(id)
-  }
-  function done() { const current = open; setOpen(null); if (current) buttonRefs.current[current]?.focus() }
-
-  const buttons: { id: MenuId; label: string; active: string | null }[] = [
-    { id: 'difficulty', label: 'Vanskelighetsgrad', active: summary(value.difficulties) },
-    { id: 'length', label: 'Lengde', active: lengthSummary(value.minLength, value.maxLength) },
-    { id: 'routeType', label: 'Turtype', active: summary(value.routeTypes, routeTypeLabel) },
-    { id: 'facilities', label: 'Langs turen', active: summary(value.facilities, facilityLabel) },
-  ]
-  const anyActive = buttons.some(button => button.active)
-  const current = buttons.find(button => button.id === open)
-
-  return <div className="ef" ref={wrapRef}>
-    <div className="ef-row" role="group" aria-label="Filtrer turer">
-      {buttons.map(button => <button key={button.id} type="button" className="ef-pill"
-        ref={element => { buttonRefs.current[button.id] = element }}
-        data-active={button.active ? 'true' : undefined}
-        aria-expanded={open === button.id} aria-controls={open === button.id ? 'ef-menu' : undefined}
-        aria-label={button.active ? `${button.label}: ${button.active}` : button.label}
-        onClick={() => toggleMenu(button.id)}>
-        {button.active ?? button.label}
-        <svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="m4 6 4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
-      </button>)}
-      {anyActive && <button type="button" className="ef-pill ef-reset" onClick={() => { onChange(EMPTY_FILTERS); setOpen(null) }}>Nullstill filtre</button>}
-    </div>
-
-    {open && current && <div id="ef-menu" ref={menuRef} className="ef-menu" style={{ left: anchor }} role="dialog" aria-label={current.label}>
-      <h3>{current.label}</h3>
-
-      {open === 'difficulty' && <div className="ef-options">
-        {DIFFICULTIES.map(item => <button key={item} type="button" className="ef-option" aria-pressed={value.difficulties.includes(item)}
-          onClick={() => onChange({ ...value, difficulties: toggle(value.difficulties, item) })}>{item}</button>)}
-      </div>}
-
-      {open === 'length' && <>
-        <div className="ef-options ef-grid-3">
-          {LENGTH_PRESETS.map(preset => <button key={preset.label} type="button" className="ef-option" aria-pressed={value.minLength === preset.min && value.maxLength === preset.max}
-            onClick={() => {
-              const active = value.minLength === preset.min && value.maxLength === preset.max
-              onChange({ ...value, minLength: active ? null : preset.min, maxLength: active ? null : preset.max })
-            }}><span>{preset.label}<small>{preset.hint}</small></span></button>)}
-        </div>
-        <form className="ef-length-form" onSubmit={event => {
-          event.preventDefault()
-          const min = minInput ? Number(minInput) : null, max = maxInput ? Number(maxInput) : null
-          onChange({ ...value, minLength: min, maxLength: max != null && min != null && max < min ? min : max })
-        }}>
-          <label>Fra (km)<input type="number" inputMode="decimal" min="0" step="0.5" value={minInput} onChange={event => setMinInput(event.target.value)} /></label>
-          <label>Til (km)<input type="number" inputMode="decimal" min="0" step="0.5" value={maxInput} onChange={event => setMaxInput(event.target.value)} /></label>
-          <button type="submit">Bruk</button>
-        </form>
-      </>}
-
-      {open === 'routeType' && <div className="ef-options ef-stack">
-        {ROUTE_TYPES.map(type => <button key={type.value} type="button" className="ef-option" aria-pressed={value.routeTypes.includes(type.value)}
-          onClick={() => onChange({ ...value, routeTypes: toggle(value.routeTypes, type.value) })}><span>{type.label}<small>{type.hint}</small></span></button>)}
-      </div>}
-
-      {open === 'facilities' && <>
-        <div className="ef-options ef-grid">
-          {placeCategories.map(category => <button key={category.value} type="button" className="ef-option" aria-pressed={value.facilities.includes(category.value)}
-            onClick={() => onChange({ ...value, facilities: toggle(value.facilities, category.value) })}>
-            <svg aria-hidden="true" viewBox="0 0 24 24" width="22" height="22"><path d={ICONS[category.value]} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
-            {category.label}
-          </button>)}
-        </div>
-        <p className="ef-note">Steder fra OpenStreetMap innen 500 m i luftlinje fra turen. Velger du flere, må turen ha alle. Første søk på en ny type kan ta litt tid.</p>
-      </>}
-
-      <div className="ef-menu-footer">
-        <button type="button" className="text-button" onClick={() => onChange({ ...value, ...CLEARED[open] })}>Nullstill</button>
-        <button type="button" onClick={done}>Ferdig</button>
-      </div>
-    </div>}
-  </div>
-}
diff --git a/src/Explore/ExploreMap.css b/src/Explore/ExploreMap.css
deleted file mode 100644
index 65496ba..0000000
--- a/src/Explore/ExploreMap.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* Stort utforskningskart øverst på Utforsk turer (ExploreMap.tsx) */
-/* Kartet går helt ut til kantene av vinduet (bryter ut av main sin padding og maksbredde)
-   og fyller skjermhøyden under toppmenyen. calc(50% - 50vw) flytter kantene ut til vinduets kant. */
-.explore-app { overflow-x: clip; }
-.explore-map { position: relative; height: clamp(480px, calc(100svh - 86px), 900px); margin: -24px calc(50% - 50vw) 32px; overflow: hidden; background: #e4eadb; border-bottom: 1px solid #e3e8df; }
-.explore-map-canvas-wrap, .explore-map-canvas { position: absolute; inset: 0; }
-.explore-map-error { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 420px; margin: 0; padding: 10px 14px; background: #fff; border-radius: 10px; font-size: 13px; }
-/* Hindrer at de generelle knappestilene i .explore-app gjør kartets zoomknapper grønne */
-.explore-app .explore-map .maplibregl-ctrl-group button { background-color: #fff; color: #23382c; padding: 0; border-radius: 0; width: 36px; height: 36px; transition: none; }
-.explore-app .explore-map .maplibregl-ctrl-group button:hover:not(:disabled) { background-color: #edf2e9; }
-.explore-app .explore-map .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px #23382c22; }
-.explore-map .maplibregl-ctrl-top-right { margin: 6px; }
-@media (max-width: 1050px) { .explore-map { margin-top: -20px; } }
-@media (max-width: 720px) { .explore-map { margin-top: -16px; height: clamp(420px, calc(100svh - 130px), 700px); } .explore-map .maplibregl-ctrl-bottom-right { bottom: 55%; } .explore-map-error { bottom: auto; top: 10px; } }
diff --git a/src/Explore/ExploreSearchPanel.css b/src/Explore/ExploreSearchPanel.css
deleted file mode 100644
index 986c31f..0000000
--- a/src/Explore/ExploreSearchPanel.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* Søkepanelet oppå kartet på Utforsk turer (ExploreSearchPanel.tsx).
-   Stor skjerm: kort øverst til venstre. Mobil: panel nederst, med kartet synlig over. */
-.esp { position: absolute; z-index: 2; top: 16px; left: 16px; width: min(400px, calc(100% - 100px)); max-height: calc(100% - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px #23382c2e; overflow: hidden; font-family: 'Avenir Next', system-ui, sans-serif; color: #23382c; }
-.esp-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; border-bottom: 1px solid #e3e8df; }
-.esp-search:focus-within { box-shadow: inset 0 0 0 2px #435d47; }
-.esp-search svg { flex-shrink: 0; color: #667c64; }
-.esp-search input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; font-size: 15px; padding: 10px 0; color: inherit; }
-.esp-search input:focus-visible { outline: none; }
-.esp-chip { display: inline-flex; align-items: center; gap: 2px; background: #e9efe4; color: #435d47; border-radius: 999px; padding: 3px 3px 3px 11px; font-size: 12px; font-weight: 600; }
-.explore-app .esp-chip button { background: transparent; color: inherit; padding: 2px 7px; font-size: 16px; line-height: 1; border-radius: 999px; }
-.explore-app .esp-chip button:hover:not(:disabled) { background: #d8e3d1; }
-.esp-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; }
-.esp-title { font-size: 18px; letter-spacing: -.3px; margin: 0 0 4px; font-weight: 600; }
-.esp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; font-size: 12px; color: #6b7768; line-height: 1.5; }
-.explore-app .esp .text-button { padding: 0; font-size: 12px; text-decoration: underline; }
-.esp-group { margin: 14px 0 8px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #6b7768; font-weight: 600; }
-.esp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
-.explore-app .esp-item { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: #fff; color: #23382c; border: 1px solid #e3e8df; border-radius: 10px; padding: 12px 14px; font-weight: 400; }
-.explore-app .esp-item:hover:not(:disabled) { background: #f1f5ee; border-color: #a2b398; }
-.explore-app .esp-item[aria-pressed=true] { background: #eef3e9; border-color: #435d47; }
-.esp-item strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
-.esp-item-meta { display: block; margin-top: 3px; font-size: 12px; color: #6b7768; }
-.esp-item-icon { font-size: 15px; line-height: 1.3; color: #677c60; }
-.esp-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: #6b7768; }
-.explore-app .esp-pager button { background: #fff; color: #435d47; border: 1px solid #e3e8df; font-size: 12px; padding: 8px 12px; }
-.explore-app .esp-pager button:hover:not(:disabled) { background: #edf2e9; }
-.explore-app .esp .esp-back { font-size: 13px; text-decoration: none; margin-bottom: 8px; }
-.esp-eyebrow { margin: 8px 0 0; font-size: 10px; letter-spacing: 1.8px; color: #6b7768; }
-.esp-route h2 { margin: 4px 0 4px; font-size: 24px; letter-spacing: -.6px; line-height: 1.15; overflow-wrap: anywhere; }
-.esp-variant label { display: block; margin: 4px 0 6px; font-size: 11px; font-weight: 600; color: #6b7768; }
-.esp-variant select { width: 100%; }
-.esp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
-.esp-stats div { background: #f4f6f1; border-radius: 10px; padding: 10px; min-width: 0; }
-.esp-stats strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
-.esp-stats span { display: block; margin-top: 2px; font-size: 11px; color: #6b7768; }
-.esp-description { font-size: 13px; line-height: 1.6; color: #3b4d40; margin: 0 0 12px; }
-.esp-notice { font-size: 12px; line-height: 1.5; background: #f4f0e4; border-radius: 9px; padding: 10px 12px; margin: 12px 0; }
-.esp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
-.explore-app .esp-actions > button:first-child { font-size: 13px; }
-.esp-error p { margin: 0 0 10px; font-size: 13px; }
-@media (max-width: 720px) {
-  .esp { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; border-radius: 16px 16px 0 0; }
-  .esp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-/* Sortering over turlista. Overstyrer de store standardstilene for select i .explore-app. */
-.esp-sort { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 12px; font-weight: 600; color: #6b7768; }
-.explore-app .esp-sort select { flex: 1; min-height: 34px; padding: 6px 32px 6px 10px !important; font-size: 12px !important; background-position: right 10px center !important; }
-/* Høydeprofilen (ElevationProfile.tsx) inne i turvisningen i panelet */
-.esp .elevation-panel { margin: 18px 0 0; padding: 14px; border-radius: 10px; }
-.esp .elevation-panel h3 { font-size: 14px; margin-bottom: 6px; }
-.esp .elevation-panel p { font-size: 12px; }
-.esp .elevation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
diff --git a/src/Explore/ExploreSearchPanel.tsx b/src/Explore/ExploreSearchPanel.tsx
deleted file mode 100644
index 52f2243..0000000
--- a/src/Explore/ExploreSearchPanel.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-// Søkefelt og panel oppå kartet på Utforsk turer. Panelet har tre tilstander:
-//  1. Ingenting skrevet eller valgt: turene i kartutsnittet (samme routes-spørring som lista under kartet)
-//  2. Brukeren skriver: forslag gruppert i steder (kommuner) og turer, hentet i én GraphQL-forespørsel
-//  3. En tur er valgt: informasjon om turen (RouteDetails.tsx)
-// Ett felt for både steder og turer, slik som på forsiden, så brukeren ikke trenger å vite hva som er hva.
-import { useEffect, useRef, useState } from 'react'
-import { graphql } from '../graphql'
-import RouteDetails from './RouteDetails'
-import { PAGE_SIZE, SORT_OPTIONS, filterVariables, lengthText, type Route, type RouteFilterValue, type RouteGroup, type RouteSort, type RouteSummary, type SelectedRoute } from './routeTypes'
-import './ExploreSearchPanel.css'
-
-/** En kommune fra søket. bbox er [vest, sør, øst, nord], brukt til å fly kartet dit. */
-export type PlaceHit = { code: string; name: string; routeCount: number; bbox: number[] | null }
-type SearchData = { routes: { total: number; items: RouteGroup[] }; searchMunicipalities: PlaceHit[] }
-
-/** Hvor lenge vi venter etter siste tastetrykk før vi søker (debouncing, sparer requests) */
-const SEARCH_DELAY_MS = 300
-// Turforslagene følger filtrene i filterraden. Stedene gjør ikke det: en kommune skal man finne uansett.
-const SEARCH_QUERY = `query($search:String!,$limit:Int!,$difficulty:[String!],$routeType:[String!],$facility:[String!],$minLength:Float,$maxLength:Float){
-  routes(search:$search,limit:$limit,difficulty:$difficulty,routeType:$routeType,facility:$facility,minLength:$minLength,maxLength:$maxLength){
-    total items{key name variantCount minLengthMeters maxLengthMeters variants{id name number lengthMeters difficulty routeType duplicateCount variantCount}}
-  }
-  searchMunicipalities(query:$search,limit:4){ code name routeCount bbox }
-}`
-
-type Props = {
-  /** Filtrene fra filterraden. Gjelder både lista og turforslagene i søket. */
-  filters: RouteFilterValue
-  sort: RouteSort
-  onSortChange: (sort: RouteSort) => void
-  // Tilstand 1: turene i kartutsnittet
-  items: RouteGroup[]
-  total: number
-  listStatus: 'loading' | 'ready' | 'error'
-  page: number
-  onPageChange: (page: number) => void
-  /** Om lista er avgrenset til kartutsnittet */
-  filtered: boolean
-  onShowAll: () => void
-  /** Stedet som er valgt fra søket, vises som en merkelapp i søkefeltet */
-  place: { name: string } | null
-  onClearPlace: () => void
-  // Tilstand 2: søk
-  onChoosePlace: (place: PlaceHit) => void
-  onChooseRoute: (route: SelectedRoute) => void
-  // Tilstand 3: valgt tur
-  selected: SelectedRoute | null
-  route: Route | null
-  routeVariants: RouteSummary[]
-  status: 'loading' | 'ready' | 'error' | 'empty'
-  onRetry: () => void
-  onBack: () => void
-  authenticated: boolean
-  onSaveRoute: () => void
-}
-
-/** Ett turkort i lister og søk */
-function RouteItem({ group, active, onChoose }: { group: RouteGroup; active: boolean; onChoose: () => void }) {
-  const first = group.variants[0]
-  const meta = [lengthText(group), group.variantCount > 1 ? `${group.variantCount} varianter` : null, first?.difficulty,
-    group.favoriteCount ? `♥ ${group.favoriteCount}` : null].filter(Boolean).join(' · ')
-  return <li><button type="button" className="esp-item" aria-pressed={active} onClick={onChoose}>
-    <span className="esp-item-icon" aria-hidden="true">△</span>
-    <span><strong>{group.name}</strong><span className="esp-item-meta">{meta}</span></span>
-  </button></li>
-}
-
-export default function ExploreSearchPanel(props: Props) {
-  const { filters, sort, onSortChange, items, total, listStatus, page, onPageChange, filtered, onShowAll, place, onClearPlace, onChoosePlace, onChooseRoute,
-    selected, route, routeVariants, status, onRetry, onBack, authenticated, onSaveRoute } = props
-  const inputRef = useRef<HTMLInputElement>(null)
-  const backRef = useRef<HTMLButtonElement>(null)
-
-  // --- Søk med debouncing. Utdaterte forespørsler avbrytes. ---
-  const [input, setInput] = useState('')
-  // Svaret lagres sammen med søket det hører til, så status kan avledes under rendering (som på forsiden)
-  const [searchResult, setSearchResult] = useState<{ search: string; data: SearchData | null } | null>(null)
-  // Filtrene gjøres om til tekst, så søket bare kjøres på nytt når de faktisk endres
-  const filterKey = JSON.stringify(filterVariables(filters))
-  useEffect(() => {
-    const search = input.trim()
-    if (search.length < 2) return
-    const controller = new AbortController()
-    const timer = window.setTimeout(() => {
-      graphql<SearchData>(SEARCH_QUERY, { search, limit: 6, ...JSON.parse(filterKey) }, controller.signal)
-        .then(data => setSearchResult({ search: search + filterKey, data }))
-        .catch(() => { if (!controller.signal.aborted) setSearchResult({ search: search + filterKey, data: null }) })
-    }, SEARCH_DELAY_MS)
-    return () => { window.clearTimeout(timer); controller.abort() }
-  }, [input, filterKey])
-  const trimmed = input.trim()
-  const searchStatus = trimmed.length < 2 ? 'idle' : searchResult?.search !== trimmed + filterKey ? 'loading' : searchResult.data ? 'ready' : 'error'
-  const hits = searchStatus === 'ready' ? searchResult!.data! : null
-  const placeCount = hits?.searchMunicipalities.length ?? 0
-  const routeTotal = hits?.routes.total ?? 0
-  const hitSummary = [placeCount && `${placeCount} ${placeCount === 1 ? 'sted' : 'steder'}`, routeTotal && `${routeTotal.toLocaleString('nb-NO')} turer`]
-    .filter(Boolean).join(' og ') || 'Ingen steder eller turer passer søket.'
-
-  // Søk går foran valgt tur, så man kan søke videre mens en tur vises
-  const mode = trimmed.length >= 2 ? 'search' : selected ? 'route' : 'list'
-
-  function chooseRoute(item: SelectedRoute) {
-    setInput('')
-    onChooseRoute({ ...item })
-    // Knappen som ble trykket forsvinner, så fokus flyttes til «Tilbake» i turvisningen
-    window.requestAnimationFrame(() => backRef.current?.focus())
-  }
-  function choosePlace(hit: PlaceHit) {
-    setInput('')
-    onChoosePlace(hit)
-    window.requestAnimationFrame(() => inputRef.current?.focus())
-  }
-
-  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE))
-  const listTitle = place ? `Turer i ${place.name}` : filtered ? 'Turer i kartutsnittet' : 'Turer i hele Norge'
-
-  return <section className="esp" aria-label="Søk etter turer og steder">
-    <form className="esp-search" role="search" onSubmit={event => event.preventDefault()}>
-      <label htmlFor="esp-input" className="visually-hidden">Søk etter tur eller sted</label>
-      <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" strokeWidth="2.5" /><path d="m15.5 15.5 5 5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
-      {place && <span className="esp-chip">{place.name}<button type="button" aria-label={`Fjern ${place.name}`} onClick={onClearPlace}>×</button></span>}
-      <input ref={inputRef} id="esp-input" type="search" autoComplete="off" maxLength={120} placeholder="Søk etter tur eller sted"
-        value={input} onChange={event => setInput(event.target.value)}
-        onKeyDown={event => { if (event.key === 'Escape') setInput('') }}
-        aria-describedby="esp-status" />
-    </form>
-
-    <div className="esp-body">
-      {mode === 'search' && <>
-        <p id="esp-status" role="status" className="esp-meta">
-          {searchStatus === 'loading' && 'Søker …'}
-          {searchStatus === 'error' && 'Søket feilet. Kontroller at backend kjører.'}
-          {hits && hitSummary}
-        </p>
-        {placeCount > 0 && <>
-          <h3 className="esp-group">Steder</h3>
-          <ul className="esp-list">{hits!.searchMunicipalities.map(hit => <li key={hit.code}>
-            <button type="button" className="esp-item" onClick={() => choosePlace(hit)}>
-              <span className="esp-item-icon" aria-hidden="true">⌖</span>
-              <span><strong>{hit.name}</strong><span className="esp-item-meta">{hit.routeCount.toLocaleString('nb-NO')} turer · Vis i kartet</span></span>
-            </button>
-          </li>)}</ul>
-        </>}
-        {hits && hits.routes.items.length > 0 && <>
-          <h3 className="esp-group">Turer{routeTotal > hits.routes.items.length ? ` (viser ${hits.routes.items.length} av ${routeTotal.toLocaleString('nb-NO')})` : ''}</h3>
-          <ul className="esp-list">{hits.routes.items.map(group =>
-            <RouteItem key={group.key} group={group} active={false} onChoose={() => chooseRoute(group.variants[0])} />)}</ul>
-        </>}
-      </>}
-
-      {mode === 'route' && <>
-        <button ref={backRef} type="button" className="text-button esp-back" onClick={() => { onBack(); window.requestAnimationFrame(() => inputRef.current?.focus()) }}>← Tilbake til turene</button>
-        {status === 'loading' && <p id="esp-status" role="status" className="esp-meta">Henter turen …</p>}
-        {status === 'error' && <div role="alert" className="esp-error"><p id="esp-status">Kunne ikke hente turen.</p><button type="button" onClick={onRetry}>Prøv igjen</button></div>}
-        {status === 'empty' && <p id="esp-status" className="esp-meta">Denne turen har ingen kartgeometri.</p>}
-        {status === 'ready' && route && <RouteDetails route={route} variants={routeVariants} onChooseVariant={onChooseRoute}
-          authenticated={authenticated} onSaveRoute={onSaveRoute} />}
-      </>}
-
-      {mode === 'list' && <>
-        <h2 className="esp-title">{listTitle}</h2>
-        <p id="esp-status" role="status" className="esp-meta">
-          {listStatus === 'loading' && 'Henter turer …'}
-          {listStatus === 'error' && 'Kunne ikke hente turene. Prøv å flytte kartet igjen.'}
-          {listStatus === 'ready' && (total ? `${total.toLocaleString('nb-NO')} turer` : 'Ingen turer her. Flytt eller zoom ut kartet.')}
-          {filtered && <button type="button" className="text-button" onClick={onShowAll}>Vis hele Norge</button>}
-        </p>
-        <label className="esp-sort">Sorter
-          <select value={sort} onChange={event => onSortChange(event.target.value as RouteSort)}>
-            {SORT_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-          </select>
-        </label>
-        {listStatus === 'ready' && items.length > 0 && <>
-          <ul className="esp-list">{items.map(group =>
-            <RouteItem key={group.key} group={group} active={group.variants.some(item => selected?.name === item.name && selected?.number === item.number)} onChoose={() => chooseRoute(group.variants[0])} />)}</ul>
-          {pages > 1 && <nav className="esp-pager" aria-label="Sider med turer">
-            <button type="button" disabled={page === 0} onClick={() => onPageChange(page - 1)}>← Forrige</button>
-            <span>Side {page + 1} av {pages.toLocaleString('nb-NO')}</span>
-            <button type="button" disabled={page + 1 >= pages} onClick={() => onPageChange(page + 1)}>Neste →</button>
-          </nav>}
-        </>}
-      </>}
-    </div>
-  </section>
-}
diff --git a/src/Explore/RouteDetails.tsx b/src/Explore/RouteDetails.tsx
deleted file mode 100644
index c738383..0000000
--- a/src/Explore/RouteDetails.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Informasjon om valgt tur i søkepanelet: navn, varianter, nøkkeltall, beskrivelse og høydeprofil.
-// Selve ruten tegnes i kartet av ExploreMap.
-import ElevationProfile from '../ElevationProfile'
-import { km, variantLabel, type Route, type RouteSummary, type SelectedRoute } from './routeTypes'
-
-type Props = {
-  route: Route
-  /** Alle registrerte varianter med samme navn */
-  variants: RouteSummary[]
-  onChooseVariant: (variant: SelectedRoute) => void
-  authenticated: boolean
-  onSaveRoute: () => void
-}
-
-export default function RouteDetails({ route, variants, onChooseVariant, authenticated, onSaveRoute }: Props) {
-  const subtitle = route.nameQuality === 'derived' ? variantLabel(route.number)
-    : route.name === 'Bymarka' ? 'Hele stinettet i Bymarka' : `Rutenummer ${route.number}`
-  return <article className="esp-route" aria-labelledby="esp-route-title">
-    <p id="esp-status" role="status" className="visually-hidden">Viser {route.name} i kartet</p>
-    <p className="esp-eyebrow">FOTTUR</p>
-    <h2 id="esp-route-title">{route.name}</h2>
-    <p className="esp-meta">{subtitle}</p>
-    {variants.length > 1 && <div className="esp-variant">
-      <label htmlFor="esp-variant">Velg rutevariant ({variants.length})</label>
-      <select id="esp-variant" value={route.id} onChange={event => {
-        const variant = variants.find(item => item.id === event.target.value)
-        if (variant) onChooseVariant({ ...variant })
-      }}>
-        {variants.map(item => <option key={item.id} value={item.id}>{variantLabel(item.number)} · {km(item.lengthMeters)} km · {item.difficulty || 'Ikke gradert'}</option>)}
-      </select>
-    </div>}
-    <div className="esp-stats">
-      <div><strong>{km(route.lengthMeters)} km</strong><span>Lengde</span></div>
-      <div><strong>{route.difficulty || 'Ikke gradert'}</strong><span>Vanskelighetsgrad</span></div>
-      <div><strong>{route.segmentCount}</strong><span>{route.connected ? 'Sammenhengende' : 'Adskilte deler'}</span></div>
-    </div>
-    <p className="esp-description">{route.description || 'Ingen turbeskrivelse er oppgitt i kildedataene.'}</p>
-    {route.maintainer && <p className="esp-meta">Vedlikeholdes av {route.maintainer}</p>}
-    <p className="esp-notice">{route.number === 'SAMLET_RUNDE'
-      ? 'Denne runden er beregnet fra registrerte rutevarianter med samme navn, og er ikke et eget registrert turforslag.'
-      : 'Linjen viser det som er registrert i datasettet. Vi har ikke bekreftet at den dekker hele turen.'}</p>
-    <div className="esp-actions">
-      <button type="button" onClick={onSaveRoute}>{authenticated ? 'Lagre og planlegg' : 'Logg inn for å lagre'}</button>
-    </div>
-    <ElevationProfile geojson={route.geojson} />
-  </article>
-}
diff --git a/src/Fjellomrade.css b/src/Fjellomrade.css
deleted file mode 100644
index b9b653d..0000000
--- a/src/Fjellomrade.css
+++ /dev/null
@@ -1,139 +0,0 @@
-/* Fargene er de samme som i resten av appen (index.css og App.css) */
-:root {
-  --bg: #f5f6f0;
-  --text: #203b32;
-  --muted: #647267;
-  --line: #dce1d7;
-  --soft: #edf2e9;
-  --green: #126b51;
-  --copper: #c27730;
-  /* Skrifttyper som allerede finnes på maskinen, så ingenting må lastes ned */
-  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
-  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --shadow: 0 12px 36px -14px rgba(35, 58, 48, 0.45);
-}
-body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
-.fo-page *, .fo-mapview * { box-sizing: border-box; }
-.fo-page a, .fo-mapview a { color: inherit; text-decoration: none; }
-.fo-page button, .fo-page input, .fo-mapview button { font: inherit; color: inherit; }
-.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
-.fo-kicker { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); }
-.fo-note { margin: 10px 0; font-size: 13px; color: var(--muted); }
-.fo-error { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #f4f0e4; font-size: 14px; }
-.fo-dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; }
-
-/* ── Oversikten ── */
-.fo-page { --gutter: clamp(16px, 4vw, 56px); }
-.fo-top-bar { display: flex; align-items: center; gap: 28px; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
-.fo-brand { margin-right: auto; font-family: var(--serif); font-size: 24px; color: var(--text) !important; }
-/* Samme grønne knapp som «Min profil» på hovedsiden (App.css) */
-.fo-profile-link { padding: 9px 14px; border-radius: 20px; background: var(--green); color: #fff !important; font-size: 12px; font-weight: 700; }
-.fo-profile-link:hover { background: #0d4f3b; }
-.fo-top-bar .is-on { color: var(--green); font-weight: 600; border-bottom: 2px solid var(--copper); padding-bottom: 4px; }
-.fo-hero { max-width: 1440px; margin: 0 auto; padding: clamp(20px, 2.5vw, 36px) var(--gutter) 28px; }
-.fo-hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 9vw, 132px); letter-spacing: -0.035em; line-height: 0.95; }
-.fo-hero p { max-width: 36em; margin: 24px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--muted); }
-.fo-filters { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
-.fo-filters .fo-search input { width: 260px; margin: 0; }
-.fo-messages { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
-/* Søketreff blant hytter og topper, over kortene */
-.fo-hits { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
-.fo-hits a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
-.fo-hits a:hover { border-color: var(--green); }
-.fo-grid { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
-.fo-grid .fo-card { padding: 0; gap: 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px -34px rgba(35, 58, 48, 0.25); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s, border-color 0.3s; }
-.fo-grid .fo-card:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -30px rgba(18, 107, 81, 0.4); }
-.fo-card-map { position: relative; aspect-ratio: 16 / 10; background: #e3ebdf; overflow: hidden; }
-.fo-card-map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
-.fo-card:hover .fo-card-map img { transform: scale(1.06); }
-.fo-card-map span { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; }
-.fo-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 22px 22px; }
-.fo-card-body h3 { display: flex; justify-content: space-between; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -0.02em; line-height: 1; }
-.fo-card-body h3 span { color: var(--green); font-size: 20px; }
-.fo-card-body > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
-.fo-card-body .fo-counts { margin-top: auto; }
-
-/* ── Ett område: kartet fyller hele skjermen, og alt annet ligger oppå ── */
-.fo-mapview { position: fixed; inset: 0; overflow: hidden; }
-.fo-map { position: absolute; inset: 0; }
-
-/* ── Panelet til venstre ── */
-.fo-panel { position: absolute; top: 12px; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; width: min(420px, calc(100% - 24px)); border-radius: 22px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
-/* Sammenfelt panel: bare toppen vises, og pila snus */
-.fo-panel.is-closed { bottom: auto; }
-.fo-panel.is-closed .fo-panel-body { display: none; }
-.fo-panel.is-closed .fo-collapse span { transform: rotate(180deg); }
-
-.fo-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 22px; border-bottom: 1px solid var(--line); }
-.fo-panel-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
-.fo-back { font-size: 14px; font-weight: 600; color: var(--muted) !important; }
-.fo-back:hover { color: var(--green) !important; }
-.fo-collapse { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; }
-.fo-collapse:hover { background: var(--line); }
-.fo-collapse span { display: inline-block; font-size: 18px; line-height: 1; transition: transform 0.3s; }
-.fo-panel-body { flex: 1; overflow-y: auto; padding: 14px 22px 22px; scrollbar-width: thin; }
-
-.fo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.fo-chips button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
-.fo-chips button:hover { border-color: var(--green); }
-.fo-chips button[aria-pressed='true'] { background: var(--green); border-color: var(--green); color: #fff; }
-.fo-search input { width: 100%; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); font-size: 14px; }
-.fo-card { display: flex; flex-direction: column; border: 1px solid var(--line); }
-.fo-card:hover { border-color: var(--green); }
-.fo-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
-.fo-counts div { display: flex; flex-direction: column-reverse; }
-.fo-counts dd { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1; }
-.fo-counts dt { margin-top: 3px; font-size: 11px; color: var(--muted); }
-.fo-top { margin: 0; font-size: 12px; color: var(--muted); }
-.fo-top strong { color: var(--text); font-weight: 600; }
-.fo-top span { color: var(--copper); font-weight: 600; }
-
-/* ── Ett område ── */
-.fo-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; }
-.fo-desc { margin: 12px 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
-.fo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
-.fo-stats div { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--line); border-top: 2px solid; background: var(--bg); }
-.fo-stats strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
-.fo-stats span { font-size: 11px; color: var(--muted); }
-.fo-peak { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(194, 119, 48, 0.45); background: linear-gradient(135deg, rgba(194, 119, 48, 0.12), rgba(194, 119, 48, 0.02)); }
-.fo-peak .fo-kicker { margin: 0; }
-.fo-peak strong { font-family: var(--serif); font-weight: 400; font-size: 20px; }
-.fo-peak-elev { font-family: var(--serif); font-size: 24px; color: var(--green); white-space: nowrap; }
-.fo-peak-elev small { font-family: var(--sans); font-size: 12px; color: var(--muted); }
-.fo-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); }
-.fo-tabs button { flex: 1; min-height: 34px; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: 12px; color: var(--muted); cursor: pointer; }
-.fo-tabs button span { opacity: 0.6; font-weight: 500; }
-.fo-tabs button[aria-pressed='true'] { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(35, 58, 48, 0.18); }
-.fo-rows { margin: 6px 0 0; padding: 0; list-style: none; }
-.fo-rows li { border-bottom: 1px solid var(--line); }
-.fo-rows button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 6px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
-.fo-rows button:hover, .fo-rows button[aria-pressed='true'] { background: var(--soft); }
-.fo-rows button > span:last-child { color: var(--green); }
-.fo-row-text { flex: 1; min-width: 0; }
-.fo-row-text strong { display: block; font-size: 14px; }
-.fo-row-text small { font-size: 12px; color: var(--muted); }
-
-/* ── Knapper og boks oppå kartet ── */
-.fo-basemap-btn, .fo-selected { position: absolute; z-index: 1; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow); }
-.fo-basemap-btn { top: 12px; right: 12px; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
-.fo-basemap-btn:hover { border-color: var(--green); }
-.fo-selected { right: 12px; bottom: 40px; display: flex; align-items: center; gap: 14px; width: min(340px, calc(100% - 24px)); padding: 14px 18px; border-radius: 18px; }
-.fo-selected > div { flex: 1; }
-.fo-selected .fo-kicker { margin: 0; }
-.fo-selected strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.1; }
-.fo-selected small { font-size: 13px; color: var(--muted); }
-.fo-selected button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
-
-/* Boksen som vises når musepekeren er over et punkt */
-.fo-hover { pointer-events: none; }
-.fo-hover .maplibregl-popup-content { padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow); font-family: var(--sans); }
-.fo-hover strong { display: block; font-size: 14px; color: var(--text); }
-.fo-hover small { font-size: 12px; color: var(--muted); }
-
-/* På mobil ligger panelet øverst og tar halve skjermen, så kartet synes under */
-@media (max-width: 760px) {
-  .fo-filters .fo-search, .fo-filters .fo-search input { width: 100%; }
-  .fo-panel { bottom: auto; max-height: 55dvh; }
-  .fo-basemap-btn { top: auto; bottom: 40px; left: 12px; right: auto; }
-  .fo-selected { left: 12px; width: auto; bottom: 92px; }
-}
diff --git a/src/Fjellomrade.tsx b/src/Fjellomrade.tsx
deleted file mode 100644
index 50f72b7..0000000
--- a/src/Fjellomrade.tsx
+++ /dev/null
@@ -1,531 +0,0 @@
-import SiteNav from './SiteNav'
-import { TOKEN_KEY } from './graphql'
-// Fjellområdesiden (fjellomrade.html): først en oversikt med ett kort per fjellområde. Klikker man på et kort,
-// åpnes kartet over hele skjermen med et panel oppå, som viser hyttene, buene, gapahukene og toppene i området.
-// Områdene kommer fra silver.mountain_areas og punktene fra silver.osm_points_of_interest.
-// Valgt område står i adressen (#/jotunheimen), så tilbakeknappen og delte lenker virker.
-// Et søketreff legger også til punktet (#/jotunheimen/n/791106132), så kartet åpnes med punktet valgt.
-import { useEffect, useRef, useState } from 'react'
-import * as maplibregl from 'maplibre-gl'
-import type { ExpressionSpecification, GeoJSONSource, StyleSpecification, SymbolLayerSpecification } from 'maplibre-gl'
-import type { Feature, FeatureCollection, MultiPolygon, Point, Polygon, Position } from 'geojson'
-import 'maplibre-gl/dist/maplibre-gl.css'
-import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
-import { graphql } from './graphql.ts'
-import { fetchMountainAreas, type MountainArea } from './mountainAreas.ts'
-import './Fjellomrade.css'
-
-maplibregl.setWorkerUrl(workerUrl)
-
-type PoiKind = 'HUT' | 'CABIN' | 'SHELTER' | 'PEAK'
-type PointOfInterest = {
-  id: string
-  kind: PoiKind
-  dntType: string | null
-  name: string | null
-  lon: number
-  lat: number
-  elevation: number | null
-  capacity: number | null
-  inside: boolean   // false for punktene opptil 10 km utenfor grensen, som bare vises svakt på kartet
-}
-
-// Navn, farge og ikon for hver type. Rekkefølgen her er rekkefølgen i fanene.
-// Ikonet er en SVG-sti i et rutenett på 24 × 24 som tegnes med hvit strek i en farget sirkel på kartet.
-const KINDS: Record<PoiKind, { short: string; one: string; color: string; icon: string }> = {
-  HUT: { short: 'Hytter', one: 'Turisthytte', color: '#c0392b', icon: 'M5 12 12 6l7 6M7 11v7h10v-7M11 18v-4h2v4' },
-  CABIN: { short: 'Buer', one: 'Bu / koie', color: '#c27730', icon: 'M6 18v-6l6-5 6 5v6zM10 18v-3h4v3' },
-  SHELTER: { short: 'Gapahuker', one: 'Gapahuk', color: '#2f8f5b', icon: 'M5 18 12 6l7 12M9 18l3-5 3 5' },
-  PEAK: { short: 'Topper', one: 'Topp', color: '#203b32', icon: 'm4 18 6-10 3 5 2-3 5 8z' },
-}
-const ALL_KINDS = Object.keys(KINDS) as PoiKind[]
-const COLOR_BY_KIND = ['match', ['get', 'kind'], ...ALL_KINDS.flatMap(k => [k, KINDS[k].color]), '#999'] as unknown as ExpressionSpecification
-
-// Tegner kartikonet for en type: farget sirkel med hvit kant og hvitt symbol. Tegnes dobbelt så stort
-// som det vises (pixelRatio 2 i addImage), så det blir skarpt på skjermer med høy oppløsning.
-function drawIcon(kind: PoiKind) {
-  const size = 48
-  const ctx = document.createElement('canvas').getContext('2d')!
-  ctx.canvas.width = ctx.canvas.height = size
-  ctx.beginPath()
-  ctx.arc(size / 2, size / 2, size / 2 - 3, 0, Math.PI * 2)
-  ctx.fillStyle = KINDS[kind].color
-  ctx.fill()
-  ctx.lineWidth = 4
-  ctx.strokeStyle = '#fff'
-  ctx.stroke()
-  // Symbolet: skaler 24 × 24-rutenettet ned til midten av sirkelen
-  ctx.setTransform(1.4, 0, 0, 1.4, 7, 7)
-  ctx.lineWidth = 2
-  ctx.lineCap = ctx.lineJoin = 'round'
-  ctx.stroke(new Path2D(KINDS[kind].icon))
-  return ctx.getImageData(0, 0, size, size)
-}
-
-// Antallet som allerede er talt opp i databasen for hvert område, per type
-const countOf = (area: MountainArea, kind: PoiKind) =>
-  ({ HUT: area.hutCount, CABIN: area.cabinCount, SHELTER: area.shelterCount, PEAK: area.peakCount })[kind]
-
-// Grov inndeling i landsdel etter breddegraden midt i området
-type Region = 'S' | 'M' | 'N'
-const REGIONS: Record<Region, string> = { S: 'Sør-Norge', M: 'Midt-Norge', N: 'Nord-Norge' }
-function regionOf(area: MountainArea): Region {
-  const lat = (area.bbox[1] + area.bbox[3]) / 2
-  return lat >= 65.5 ? 'N' : lat >= 62 ? 'M' : 'S'
-}
-
-const KARTVERKET_TILES = 'https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png'
-const MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    topo: {
-      type: 'raster',
-      tiles: [KARTVERKET_TILES],
-      tileSize: 256,
-      maxzoom: 18,
-      attribution: '© Kartverket · © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap-bidragsytere</a>',
-    },
-    // Flyfoto fra Esri, samme kilde som i ex P2. Laget er skjult til brukeren bytter til flyfoto.
-    satellitt: {
-      type: 'raster',
-      tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
-      tileSize: 256,
-      maxzoom: 18,
-      attribution: 'Bilder © Esri, Maxar, Earthstar Geographics',
-    },
-  },
-  layers: [
-    { id: 'topo', type: 'raster', source: 'topo' },
-    { id: 'satellitt', type: 'raster', source: 'satellitt', layout: { visibility: 'none' } },
-  ],
-}
-
-// Én kartflis fra Kartverket midt i området, brukt som bilde på kortet i oversikten
-function tileUrl(area: MountainArea, z = 7) {
-  const lon = (area.bbox[0] + area.bbox[2]) / 2
-  const lat = ((area.bbox[1] + area.bbox[3]) / 2) * (Math.PI / 180)
-  const x = Math.floor(((lon + 180) / 360) * 2 ** z)
-  const y = Math.floor(((1 - Math.log(Math.tan(lat) + 1 / Math.cos(lat)) / Math.PI) / 2) * 2 ** z)
-  return KARTVERKET_TILES.replace('{z}', String(z)).replace('{y}', String(y)).replace('{x}', String(x))
-}
-
-const POI_QUERY = `
-  query AreaPointsOfInterest($areaId: ID!) {
-    areaPointsOfInterest(areaId: $areaId) { id kind dntType name lon lat elevation capacity inside }
-  }
-`
-
-const SEARCH_QUERY = `
-  query SearchPointsOfInterest($query: String!) {
-    searchPointsOfInterest(query: $query) { areaId point { id kind dntType name lon lat elevation capacity inside } }
-  }
-`
-type SearchHit = { areaId: string; point: PointOfInterest }
-
-// Backend henter punktene i området og like utenfor. inside er true for dem som er med i opptellingen.
-async function fetchPoints(areaId: string, signal: AbortSignal): Promise<PointOfInterest[]> {
-  const data = await graphql<{ areaPointsOfInterest: PointOfInterest[] }>(POI_QUERY, { areaId }, signal)
-  return data.areaPointsOfInterest
-}
-
-function pointsToGeoJson(points: PointOfInterest[]): FeatureCollection<Point, PointOfInterest> {
-  return {
-    type: 'FeatureCollection',
-    features: points.map(p => ({ type: 'Feature', geometry: { type: 'Point', coordinates: [p.lon, p.lat] }, properties: p })),
-  }
-}
-
-const boundaryOf = (area: MountainArea) => JSON.parse(area.geojson) as Polygon | MultiPolygon
-
-// Et polygon som dekker hele verden, med området som hull, brukes til et svakt slør over kartet utenfor området.
-// Hullene er ytterkanten av hver del av grensen, så det virker både for Polygon og MultiPolygon.
-function maskAround(area: MountainArea): Feature<Polygon> {
-  const geometry = boundaryOf(area)
-  const parts: Position[][][] = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates
-  const world = [[-180, -85], [180, -85], [180, 85], [-180, 85], [-180, -85]]
-  return { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [world, ...parts.map(rings => rings[0])] } }
-}
-
-// Undertekst for et punkt i lista og i boksen for valgt punkt
-function describe(p: PointOfInterest) {
-  if (p.kind === 'PEAK') return p.elevation !== null ? `${p.elevation} moh.` : 'Ukjent høyde'
-  return [p.capacity !== null && `${p.capacity} sengeplasser`, p.dntType, p.elevation !== null && `${p.elevation} moh.`].filter(Boolean).join(' · ') || KINDS[p.kind].one
-}
-
-// Innholdet i boksen som vises når musepekeren er over et punkt.
-// textContent (ikke innerHTML) fordi navnene kommer fra OpenStreetMap og ikke er til å stole på.
-function hoverContent(p: PointOfInterest) {
-  const box = document.createElement('div')
-  const title = document.createElement('strong')
-  title.textContent = p.name ?? 'Uten navn'
-  const details = document.createElement('small')
-  details.textContent = `${KINDS[p.kind].one} · ${describe(p)}`
-  box.append(title, details)
-  return box
-}
-
-// #/jotunheimen gir området, og #/jotunheimen/n/791106132 gir også punktet som skal velges
-function readHash() {
-  const [areaId, ...point] = decodeURIComponent(window.location.hash.replace(/^#\/?/, '')).split('/')
-  return { areaId: areaId || null, pointId: point.join('/') || null }
-}
-
-export default function Fjellomrade() {
-  const [authenticated, setAuthenticated] = useState(false)
-  useEffect(() => {
-    let controller: AbortController | undefined
-    const checkSession = () => {
-      controller?.abort()
-      controller = new AbortController()
-      const current = controller
-      const token = localStorage.getItem(TOKEN_KEY)
-      if (!token) { setAuthenticated(false); return }
-      void graphql<{me: {username: string} | null}>('query($token:String!){me(token:$token){username}}', {token}, current.signal)
-        .then(data => {
-          if (current.signal.aborted || localStorage.getItem(TOKEN_KEY) !== token) return
-          setAuthenticated(Boolean(data.me))
-          if (!data.me) localStorage.removeItem(TOKEN_KEY)
-        })
-        .catch(() => { if (!current.signal.aborted) setAuthenticated(false) })
-    }
-    checkSession()
-    window.addEventListener('storage', checkSession)
-    window.addEventListener('focus', checkSession)
-    return () => { controller?.abort(); window.removeEventListener('storage', checkSession); window.removeEventListener('focus', checkSession) }
-  }, [])
-  const [areas, setAreas] = useState<MountainArea[] | null>(null)
-  const [error, setError] = useState('')
-  const [route, setRoute] = useState(readHash)
-  // Hvor langt ned på oversikten man var, så man kommer tilbake til samme sted fra kartet
-  const overviewScroll = useRef(0)
-
-  useEffect(() => {
-    fetchMountainAreas().then(setAreas).catch((e: unknown) => setError(e instanceof Error ? e.message : 'Noe gikk galt'))
-    const onHashChange = () => setRoute(readHash())
-    window.addEventListener('hashchange', onHashChange)
-    return () => window.removeEventListener('hashchange', onHashChange)
-  }, [])
-
-  const area = areas?.find(a => a.id === route.areaId) ?? null
-
-  useEffect(() => {
-    if (!area) window.scrollTo(0, overviewScroll.current)
-  }, [area])
-
-  if (area) return <AreaView key={area.id} area={area} pointId={route.pointId} />
-  return (
-    <Overview authenticated={authenticated} areas={areas} error={error} notFound={areas && route.areaId ? route.areaId : null}
-      onOpen={() => { overviewScroll.current = window.scrollY }} />
-  )
-}
-
-type OverviewProps = { authenticated: boolean; areas: MountainArea[] | null; error: string; notFound: string | null; onOpen: () => void }
-
-function Overview({ authenticated, areas, error, notFound, onOpen }: OverviewProps) {
-  const [region, setRegion] = useState<Region | 'all'>('all')
-  const [query, setQuery] = useState('')
-  const needle = query.trim().toLowerCase()
-  const shown = (areas ?? [])
-    .filter(a => (region === 'all' || regionOf(a) === region) && (!needle || `${a.name} ${a.description ?? ''}`.toLowerCase().includes(needle)))
-    .sort((a, b) => (b.highestPeak?.elevation ?? 0) - (a.highestPeak?.elevation ?? 0))
-
-  // Søket finner også hytter og topper. Backend spørres en kort stund etter at man har sluttet å skrive,
-  // og treffene huskes sammen med søketeksten, så gamle treff ikke vises for et nytt søk.
-  const [search, setSearch] = useState<{ needle: string; hits: SearchHit[] }>({ needle: '', hits: [] })
-  useEffect(() => {
-    if (needle.length < 2) return
-    const controller = new AbortController()
-    const timer = setTimeout(() => {
-      graphql<{ searchPointsOfInterest: SearchHit[] }>(SEARCH_QUERY, { query: needle }, controller.signal)
-        .then(data => setSearch({ needle, hits: data.searchPointsOfInterest }))
-        .catch(() => { /* søket i hytter og topper er et tillegg, så feil vises ikke */ })
-    }, 250)
-    return () => { clearTimeout(timer); controller.abort() }
-  }, [needle])
-  const hits = search.needle === needle ? search.hits : []
-  const areaName = (id: string) => areas?.find(a => a.id === id)?.name ?? id
-
-  return (
-    <div className="fo-page">
-      <SiteNav active="mountains" authenticated={authenticated} />
-      <header className="fo-hero">
-        <h1>Fjellområder i Norge</h1>
-        <p>Velg et fjellområde for å åpne kartet, med alle hyttene, buene, gapahukene og toppene på ett sted.</p>
-      </header>
-
-      <section className="fo-filters">
-        <div className="fo-chips">
-          {(['all', 'S', 'M', 'N'] as const).map(r => (
-            <button key={r} type="button" aria-pressed={region === r} onClick={() => setRegion(r)}>
-              {r === 'all' ? 'Alle' : REGIONS[r]}
-            </button>
-          ))}
-        </div>
-        <label className="fo-search">
-          <span className="sr-only">Søk etter område, hytte eller topp</span>
-          <input type="search" placeholder="Søk etter område, hytte eller topp …" value={query} onChange={e => setQuery(e.target.value)} />
-        </label>
-      </section>
-
-      <div className="fo-messages">
-        {error && <p className="fo-error" role="alert">Fikk ikke hentet fjellområdene: {error}</p>}
-        {!areas && !error && <p className="fo-note">Henter fjellområder …</p>}
-        {notFound && <p className="fo-error" role="alert">Fant ikke fjellområdet «{notFound}». Velg et av områdene under.</p>}
-        {areas && shown.length === 0 && hits.length === 0 && <p className="fo-note">Ingen fjellområder, hytter eller topper passer søket.</p>}
-      </div>
-
-      {hits.length > 0 && (
-        <section className="fo-hits" aria-label="Hytter og topper som passer søket">
-          {hits.map(({ areaId, point }) => (
-            <a key={`${areaId}/${point.id}`} href={`#/${areaId}/${point.id}`} onClick={onOpen}>
-              <span className="fo-dot" style={{ background: KINDS[point.kind].color }} />
-              <span className="fo-row-text">
-                <strong>{point.name}</strong>
-                <small>{KINDS[point.kind].one} · {areaName(areaId)} · {describe(point)}</small>
-              </span>
-            </a>
-          ))}
-        </section>
-      )}
-
-      <section className="fo-grid">
-        {shown.map(a => (
-          <a key={a.id} href={`#/${a.id}`} className="fo-card" onClick={onOpen}>
-            <div className="fo-card-map">
-              <img src={tileUrl(a)} alt="" loading="lazy" />
-              <span>{REGIONS[regionOf(a)]}</span>
-            </div>
-            <div className="fo-card-body">
-              <h3>{a.name} <span aria-hidden="true">→</span></h3>
-              <p>{a.description}</p>
-              <dl className="fo-counts">
-                {ALL_KINDS.map(k => (
-                  <div key={k}><dd>{countOf(a, k)}</dd><dt>{KINDS[k].short.toLowerCase()}</dt></div>
-                ))}
-              </dl>
-              {a.highestPeak && (
-                <p className="fo-top">Høyeste topp · <strong>{a.highestPeak.name}</strong> <span>{a.highestPeak.elevation} moh.</span></p>
-              )}
-            </div>
-          </a>
-        ))}
-      </section>
-    </div>
-  )
-}
-
-// Ett område: kartet over hele skjermen, med et panel oppå som kan felles sammen
-function AreaView({ area, pointId }: { area: MountainArea; pointId: string | null }) {
-  const [points, setPoints] = useState<PointOfInterest[] | null>(null)
-  const [error, setError] = useState('')
-  const [tab, setTab] = useState<PoiKind>('HUT')
-  const [selected, setSelected] = useState<PointOfInterest | null>(null)
-  const [panelOpen, setPanelOpen] = useState(true)
-
-  useEffect(() => {
-    const controller = new AbortController()
-    fetchPoints(area.id, controller.signal)
-      .then(points => {
-        setPoints(points)
-        // Kom man fra et søketreff, velges punktet og fanen for typen dets
-        const fromSearch = points.find(p => p.id === pointId)
-        if (fromSearch) {
-          setSelected(fromSearch)
-          setTab(fromSearch.kind)
-        }
-      })
-      .catch((e: unknown) => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : 'Noe gikk galt') })
-    return () => controller.abort()
-  }, [area, pointId])
-
-  // Toppene sorteres etter høyde, resten etter antall sengeplasser
-  const rows = (points ?? [])
-    .filter(p => p.kind === tab && p.inside)
-    .sort((a, b) => (tab === 'PEAK' ? (b.elevation ?? 0) - (a.elevation ?? 0) : (b.capacity ?? 0) - (a.capacity ?? 0)))
-
-  return (
-    <div className="fo-mapview">
-      <AreaMap area={area} points={points ?? []} selected={selected} panelOpen={panelOpen}
-        onSelect={id => setSelected(points?.find(p => p.id === id) ?? null)} />
-
-      <aside className={`fo-panel ${panelOpen ? '' : 'is-closed'}`}>
-        <header className="fo-panel-head">
-          <a href="#/" className="fo-back">← Alle fjellområder</a>
-          <button type="button" className="fo-collapse" onClick={() => setPanelOpen(o => !o)}
-            aria-expanded={panelOpen} aria-label={panelOpen ? 'Skjul panelet' : 'Vis panelet'}>
-            <span aria-hidden="true">⌃</span>
-          </button>
-        </header>
-        <div className="fo-panel-body">
-          <p className="fo-kicker">{REGIONS[regionOf(area)]} · Fjellområde</p>
-          <h1 className="fo-title">{area.name}</h1>
-          {area.description && <p className="fo-desc">{area.description}</p>}
-
-          <div className="fo-stats">
-            {ALL_KINDS.map(k => (
-              <div key={k} style={{ borderTopColor: KINDS[k].color }}>
-                <strong>{countOf(area, k)}</strong><span>{KINDS[k].short}</span>
-              </div>
-            ))}
-          </div>
-
-          {area.highestPeak && (
-            <div className="fo-peak">
-              <div><span className="fo-kicker">Høyeste topp</span><strong>{area.highestPeak.name}</strong></div>
-              <span className="fo-peak-elev">{area.highestPeak.elevation}<small> moh.</small></span>
-            </div>
-          )}
-
-          <div className="fo-tabs">
-            {ALL_KINDS.map(k => (
-              <button key={k} type="button" aria-pressed={tab === k} onClick={() => setTab(k)}>
-                {KINDS[k].short} <span>{countOf(area, k)}</span>
-              </button>
-            ))}
-          </div>
-          {error && <p className="fo-error" role="alert">Fikk ikke hentet punktene: {error}</p>}
-          {!points && !error && <p className="fo-note">Henter punkter …</p>}
-          <ol className="fo-rows">
-            {rows.map(p => (
-              <li key={p.id}>
-                <button type="button" aria-pressed={selected?.id === p.id} onClick={() => setSelected(p)}>
-                  <span className="fo-dot" style={{ background: KINDS[p.kind].color }} />
-                  <span className="fo-row-text"><strong>{p.name ?? 'Uten navn'}</strong><small>{describe(p)}</small></span>
-                  <span aria-hidden="true">→</span>
-                </button>
-              </li>
-            ))}
-          </ol>
-          {points && rows.length === 0 && <p className="fo-note">Ingen registrert i dette området.</p>}
-        </div>
-      </aside>
-
-      {selected && (
-        <div className="fo-selected">
-          <span className="fo-dot" style={{ background: KINDS[selected.kind].color }} />
-          <div><span className="fo-kicker">{KINDS[selected.kind].one}</span><strong>{selected.name ?? 'Uten navn'}</strong><small>{describe(selected)}</small></div>
-          <button type="button" onClick={() => setSelected(null)} aria-label="Lukk">✕</button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-type MapProps = {
-  area: MountainArea
-  points: PointOfInterest[]
-  selected: PointOfInterest | null
-  panelOpen: boolean
-  onSelect: (id: string) => void
-}
-
-// Kartverkets kart over hele skjermen, zoomet inn på området. Området er svakt farget, og kartet utenfor har et tynt slør.
-function AreaMap({ area, points, selected, panelOpen, onSelect }: MapProps) {
-  const container = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<maplibregl.Map | null>(null)
-  const [loaded, setLoaded] = useState(false)
-  const [satellite, setSatellite] = useState(false)
-  // Klikk og hover i kartet bruker alltid siste versjon av onSelect og punktene, uten at kartet må lages på nytt
-  const onSelectRef = useRef(onSelect)
-  const pointsRef = useRef(points)
-  useEffect(() => {
-    onSelectRef.current = onSelect
-    pointsRef.current = points
-  })
-
-  // 1. Lag kartet én gang per område
-  useEffect(() => {
-    if (!container.current) return
-    const [west, south, east, north] = area.bbox
-    const map = new maplibregl.Map({ container: container.current, style: MAP_STYLE, bounds: [[west, south], [east, north]] })
-    map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
-    mapRef.current = map
-
-    map.on('load', () => {
-      map.addSource('area', { type: 'geojson', data: { type: 'Feature', properties: {}, geometry: boundaryOf(area) } })
-      map.addLayer({ id: 'area-fill', type: 'fill', source: 'area', paint: { 'fill-color': '#c27730', 'fill-opacity': 0.08 } })
-      // Sløret er så svakt at kartet og punktene utenfor fortsatt er lette å lese
-      map.addSource('mask', { type: 'geojson', data: maskAround(area) })
-      map.addLayer({ id: 'mask', type: 'fill', source: 'mask', paint: { 'fill-color': '#7d8a80', 'fill-opacity': 0.15 } })
-      map.addLayer({ id: 'area-line', type: 'line', source: 'area', paint: { 'line-color': '#c27730', 'line-width': 2.5, 'line-dasharray': [3, 2] } })
-
-      map.addSource('pois', { type: 'geojson', data: pointsToGeoJson([]) })
-      // Ring rundt det valgte punktet. Filteret settes når et punkt velges.
-      map.addLayer({ id: 'pois-selected', type: 'circle', source: 'pois', filter: ['==', ['get', 'id'], ''], paint: { 'circle-radius': 16, 'circle-color': COLOR_BY_KIND, 'circle-opacity': 0.25 } })
-      // Ett ikon per type (poi-HUT, poi-CABIN …), som vokser litt når man zoomer inn.
-      // Punktene utenfor grensen er mindre og halvt gjennomsiktige.
-      for (const kind of ALL_KINDS) map.addImage(`poi-${kind}`, drawIcon(kind), { pixelRatio: 2 })
-      const icon: SymbolLayerSpecification['layout'] = {
-        'icon-image': ['concat', 'poi-', ['get', 'kind']],
-        'icon-size': ['interpolate', ['linear'], ['zoom'], 8, ['case', ['get', 'inside'], 0.7, 0.55], 13, ['case', ['get', 'inside'], 1.1, 0.85]],
-      }
-      const paint: SymbolLayerSpecification['paint'] = { 'icon-opacity': ['case', ['get', 'inside'], 1, 0.5] }
-      // Toppene får ikke ligge oppå hverandre. De høyeste plasseres først, så når man zoomer ut,
-      // vises bare de høyeste toppene, og flere kommer til når man zoomer inn.
-      map.addLayer({
-        id: 'pois-peaks', type: 'symbol', source: 'pois', filter: ['==', ['get', 'kind'], 'PEAK'], paint,
-        layout: { ...icon, 'symbol-sort-key': ['-', ['coalesce', ['get', 'elevation'], 0]] },
-      })
-      // Hytter, buer og gapahuker vises alltid, også når de ligger tett
-      map.addLayer({
-        id: 'pois', type: 'symbol', source: 'pois', filter: ['!=', ['get', 'kind'], 'PEAK'], paint,
-        layout: { ...icon, 'icon-allow-overlap': true },
-      })
-      const poiLayers = ['pois', 'pois-peaks']
-      // Kartet mister tomme verdier i egenskapene, så vi slår opp punktet på id i stedet
-      map.on('click', poiLayers, event => onSelectRef.current(String(event.features?.[0]?.properties.id)))
-      // Vis navnet på punktet musepekeren er over
-      const hover = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 12, className: 'fo-hover' })
-      map.on('mousemove', poiLayers, event => {
-        const point = pointsRef.current.find(p => p.id === String(event.features?.[0]?.properties.id))
-        if (!point) return
-        map.getCanvas().style.cursor = 'pointer'
-        hover.setLngLat([point.lon, point.lat]).setDOMContent(hoverContent(point)).addTo(map)
-      })
-      map.on('mouseleave', poiLayers, () => {
-        map.getCanvas().style.cursor = ''
-        hover.remove()
-      })
-      setLoaded(true)
-    })
-
-    return () => {
-      mapRef.current = null
-      map.remove()
-    }
-  }, [area])
-
-  // 2. Vis hele området, med plass til panelet på venstre side når det er åpent
-  useEffect(() => {
-    const [west, south, east, north] = area.bbox
-    const left = panelOpen && window.innerWidth > 760 ? 460 : 60
-    mapRef.current?.fitBounds([[west, south], [east, north]], { padding: { top: 60, bottom: 60, right: 60, left }, duration: 800 })
-  }, [area, panelOpen])
-
-  // 3. Tegn punktene, marker det valgte punktet og fly dit
-  useEffect(() => {
-    if (loaded) (mapRef.current?.getSource('pois') as GeoJSONSource).setData(pointsToGeoJson(points))
-  }, [points, loaded])
-
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !loaded) return
-    map.setFilter('pois-selected', ['==', ['get', 'id'], selected?.id ?? ''])
-    if (selected) map.flyTo({ center: [selected.lon, selected.lat], zoom: Math.max(map.getZoom(), 12) })
-  }, [selected, loaded])
-
-  // Bytt mellom Kartverkets kart og flyfoto ved å vise eller skjule flyfotolaget
-  const toggleSatellite = () => {
-    mapRef.current?.setLayoutProperty('satellitt', 'visibility', satellite ? 'none' : 'visible')
-    setSatellite(!satellite)
-  }
-
-  return (
-    <>
-      <div ref={container} className="fo-map" />
-      <button type="button" className="fo-basemap-btn" onClick={toggleSatellite} disabled={!loaded}>
-        {satellite ? 'Vis kart' : 'Vis flyfoto'}
-      </button>
-    </>
-  )
-}
diff --git a/src/Home.css b/src/Home.css
deleted file mode 100644
index 7c63e10..0000000
--- a/src/Home.css
+++ /dev/null
@@ -1,267 +0,0 @@
-/* Forsiden. Header-stilen kommer fra App.css. */
-.home-header .header-actions {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-}
-
-/* Forsiden skal gå kant i kant, så vi overstyrer max-width/padding fra main i App.css */
-.home-main {
-    max-width: none;
-    padding: 0;
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-}
-
-/* ---------- Hero med bakgrunnsbilde ---------- */
-.home-hero {
-    position: relative;
-    min-height: 560px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 80px 5%;
-    background-color: #2c5a49;
-    /* vises hvis bildet mangler eller ikke er lastet ennå */
-    background-size: cover;
-    background-position: 72% center; /* holder fotturisten i bildet også på smale skjermer */
-}
-
-/* Mørk toning over bildet så den hvite teksten får god kontrast (WCAG) */
-.home-hero::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.45));
-}
-
-.home-hero-content {
-    position: relative;
-    width: min(100%, 960px);
-    text-align: center;
-}
-
-.home-hero h1 {
-    color: #fff;
-    margin: 0 0 40px;
-    text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
-}
-
-.home-search {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    background: #fff;
-    border-radius: 10px;
-    padding: 0 24px;
-    box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
-    color: #2c6e57;
-}
-
-.home-search input {
-    flex: 1;
-    min-width: 0;
-    border: 0;
-    padding: 24px 0;
-    font: inherit;
-    font-size: 20px;
-    color: #203b32;
-    background: transparent;
-}
-
-.home-search input::placeholder {
-    color: #2c6e57;
-}
-
-/* Skjuler den oransje fokusrammen (fra App.css) rundt søkefeltet */
-.home-search input:focus-visible {
-    outline: none;
-}
-
-.home-search-results {
-    text-align: left;
-    margin-top: 10px;
-}
-
-.home-search-results p {
-    color: #fff;
-    margin: 8px 4px;
-    font-size: 14px;
-}
-
-/* Ett hvitt panel med gruppene «Steder» og «Turer» */
-.home-search-panel {
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
-    padding: 6px;
-}
-
-.home-search-group {
-    margin: 10px 16px 4px;
-    font-size: 12px;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: #557365;
-}
-
-.home-search-results ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.home-search-results button {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    text-align: left;
-    background: transparent;
-    color: #203b32;
-    padding: 12px 16px;
-}
-
-.home-search-results button:hover {
-    background: #edf2e9;
-}
-
-.home-search-results span {
-    color: #5a6c61;
-    font-size: 14px;
-    white-space: nowrap;
-}
-
-.home-hero-credit {
-    position: absolute;
-    right: 16px;
-    bottom: 8px;
-    margin: 0;
-    font-size: 13px;
-    color: rgb(255 255 255 / 0.85);
-}
-
-/* ---------- Turforslag i nærområdet ---------- */
-.home-nearby {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 72px 5%;
-    text-align: center;
-}
-
-.home-nearby h2 {
-    font-size: clamp(26px, 3.5vw, 38px);
-    margin: 0;
-}
-
-
-
-
-
-.home-suggestions {
-    list-style: none;
-    padding: 0;
-    margin: 24px 0 0;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 16px;
-    text-align: left;
-}
-
-.home-suggestions button {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    text-align: left;
-    background: #fff;
-    color: #203b32;
-    border: 1px solid #dce1d7;
-    border-radius: 14px;
-    padding: 20px;
-    overflow-wrap: anywhere;
-}
-
-.home-suggestions button:hover {
-    border-color: #126b51;
-}
-
-.home-suggestions strong {
-    font-size: 18px;
-}
-
-.home-suggestion-length {
-    font-size: 15px;
-    font-weight: 600;
-    color: #126b51;
-}
-
-.home-suggestion-meta {
-    font-size: 13px;
-    color: #5a6c61;
-}
-
-@media (max-width: 800px) {
-    .home-hero {
-        min-height: 440px;
-    }
-
-    .home-search input {
-        font-size: 17px;
-        padding: 18px 0;
-    }
-
-    .home-suggestions {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 480px) {
-    .home-suggestions {
-        grid-template-columns: 1fr;
-    }
-}
-.home-nearby-subtitle {
-    color: #5a6c61;
-    margin: 8px 0 0;
-}
-
-.home-nearby:focus { outline: none; } /* får fokus fra koden når et sted velges, trenger ingen ramme */
-
-.home-nearby-reset {
-    margin-top: 8px;
-}
-
-/* Forsidens naturbilde og søk, med eksisterende kommunesøk bevart. */
-.home-main{max-width:1432px;margin:0 auto;padding:24px 56px;font-family:'Avenir Next',system-ui,sans-serif}
-.home-hero{min-height:480px;padding:60px;justify-content:flex-start;border-radius:16px;background-position:center;overflow:hidden}
-.home-hero::before{background:linear-gradient(90deg,rgba(17,37,24,.8),rgba(17,37,24,.36) 50%,rgba(17,37,24,.06))}
-.home-hero-content{width:min(670px,100%);text-align:left}
-.home-eyebrow{color:#d4dfcc;letter-spacing:2.4px;font-size:10px;font-weight:600;margin:0 0 20px}
-.home-hero h1{font-size:clamp(40px,5.6vw,68px);font-weight:600;line-height:1.03;letter-spacing:-2.5px;margin:0 0 22px;text-shadow:none}
-.home-intro{color:#e6ebe1;font-size:16px;line-height:1.65;margin:0 0 28px}
-.home-search{width:min(590px,100%);gap:12px;padding:7px 7px 7px 17px;border-radius:10px;color:#667c64;box-shadow:0 8px 24px #10211720}
-.home-search svg{width:18px;height:18px;flex-shrink:0}
-.home-search input{font-size:13px;padding:12px 0;color:#23382c}
-.home-search input::placeholder{color:#7b8577}
-.home-search:focus-within{outline:2px solid #c7d5bc;outline-offset:3px}
-.home-search .home-find-button{background:#435d47;color:#fff;font-size:12px;font-weight:600;padding:13px 17px;border-radius:8px;white-space:nowrap;display:flex;gap:15px;align-items:center}
-.home-search .home-find-button:hover{background:#304c37}
-.home-hero-credit{right:18px;bottom:14px;padding:5px 9px;border-radius:4px;background:#152e2455;font-size:9px;color:#edf1e8}
-.home-search-results{width:min(590px,100%)}
-.home-search-panel{max-height:400px;overflow-y:auto}
-.home-search-results button{align-items:center;min-width:0}
-.home-search-results strong{overflow-wrap:anywhere}
-.home-nearby{padding:48px 0;max-width:none;text-align:left}
-.home-nearby h2{font-size:28px;letter-spacing:-.8px;font-weight:600}
-@media(max-width:1050px){.home-main{padding:20px 28px}.home-hero{padding:40px;min-height:430px}}
-@media(max-width:720px){.home-main{padding:16px}.home-hero{padding:36px 24px;min-height:430px;background-position:60% center}.home-hero h1{font-size:48px}.home-search{gap:8px;padding-left:12px}.home-search input{font-size:12px}.home-search .home-find-button{padding:12px;font-size:11px;gap:9px}.home-nearby h2{font-size:23px}.home-search-results span{white-space:normal;text-align:right;font-size:12px}}
-@media(max-width:390px){.home-hero h1{font-size:42px}.home-search svg,.home-find-button span{display:none}}
diff --git a/src/Home.tsx b/src/Home.tsx
deleted file mode 100644
index 9830b58..0000000
--- a/src/Home.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import SiteNav from './SiteNav'
-import { useEffect, useRef, useState } from 'react'
-import { graphql, TOKEN_KEY } from './graphql'
-import './Home.css'
-
-/**
- * Lenke til bakgrunnsbildet øverst på forsiden.
- * Lim inn URL-en til bildet her (eller legg bildet i public/ og skriv f.eks. '/hero.jpg').
- * Er feltet tomt, vises en grønn bakgrunn i stedet.
- */
-const HERO_IMAGE_URL = `${import.meta.env.BASE_URL}images/explore-nature.jpg`
-/** Kreditering av fotografen, vises nederst i hjørnet av bildet. La stå tom hvis ikke nødvendig. */
-const HERO_IMAGE_CREDIT = 'Generert stemningsbilde'
-
-/** Hvor lenge vi venter etter siste tastetrykk før vi søker (debouncing, sparer requests) */
-const SEARCH_DELAY_MS = 300
-
-type Municipality = { code: string; name: string }
-type Place = Municipality & { routeCount: number }
-type RouteVariant = { name: string; number: string }
-type RouteGroup = {
-    key: string
-    name: string
-    variantCount: number
-    minLengthMeters: number
-    maxLengthMeters: number
-    variants: (RouteVariant & { difficulty: string | null; routeType: string | null })[]
-    /** Bare satt for populære turer: hvor mange brukere som har lagret turen */
-    favoriteCount?: number
-}
-type RoutePage = { routes: { total: number; items: RouteGroup[] } }
-type PopularRoute = { favoriteCount: number; route: RouteVariant & { id: string; lengthMeters: number; difficulty: string | null; routeType: string | null } }
-
-const POPULAR_QUERY = `query($limit:Int!){
-  popularRoutes(limit:$limit){ favoriteCount route{id name number lengthMeters difficulty routeType} }
-}`
-
-/** Gjør en populær tur om til samme form som et søketreff, så kortene kan vises likt */
-function popularToGroup({ favoriteCount, route }: PopularRoute): RouteGroup {
-    return { key: route.id, name: route.name, variantCount: 1, minLengthMeters: route.lengthMeters, maxLengthMeters: route.lengthMeters, variants: [route], favoriteCount }
-}
-
-// Samme routes-spørring som turlisten bruker, men med få treff siden forsiden bare viser et utvalg
-const ROUTES_QUERY = `query($search:String!,$municipality:String,$limit:Int!){
-  routes(search:$search,municipality:$municipality,limit:$limit){
-    total items{key name variantCount minLengthMeters maxLengthMeters variants{name number difficulty routeType}}
-  }
-}`
-
-// Søkefeltet henter turer og steder (kommuner) i én og samme GraphQL-forespørsel
-const SEARCH_QUERY = `query($search:String!,$limit:Int!){
-  routes(search:$search,limit:$limit){
-    total items{key name variantCount minLengthMeters maxLengthMeters variants{name number difficulty routeType}}
-  }
-  searchMunicipalities(query:$search,limit:4){code name routeCount}
-}`
-type SearchData = { routes: RoutePage['routes']; searchMunicipalities: Place[] }
-
-function formatLength(group: RouteGroup) {
-    const km = (meters: number) => (meters / 1000).toLocaleString('nb-NO', { maximumFractionDigits: 1 })
-    return group.minLengthMeters === group.maxLengthMeters
-        ? `${km(group.minLengthMeters)} km`
-        : `${km(group.minLengthMeters)}–${km(group.maxLengthMeters)} km`
-}
-
-export default function Home({ onLoginClick, onSelectRoute,authenticated=false,onProfileClick,onExploreClick }: {
-    authenticated?:boolean
-    onProfileClick?:()=>void
-    onExploreClick?:()=>void
-    onLoginClick: () => void
-    onSelectRoute: (route: RouteVariant) => void
-}) {
-    // --- Søk ---
-    const [input, setInput] = useState('')
-    // Svaret lagres sammen med søket det hører til. Da kan status avledes under rendering
-    // i stedet for å settes i effekten (unngår ekstra renders).
-    const [searchResult, setSearchResult] = useState<{ search: string; data: SearchData | null } | null>(null)
-
-    // Søk med debouncing: venter til brukeren har sluttet å skrive, og avbryter utdaterte requests
-    useEffect(() => {
-        const search = input.trim()
-        if (search.length < 2) return
-        const controller = new AbortController()
-        const timer = window.setTimeout(() => {
-            graphql<SearchData>(SEARCH_QUERY, { search, limit: 6 }, controller.signal)
-                .then(data => setSearchResult({ search, data }))
-                .catch(() => { if (!controller.signal.aborted) setSearchResult({ search, data: null }) })
-        }, SEARCH_DELAY_MS)
-        return () => { window.clearTimeout(timer); controller.abort() }
-    }, [input])
-    const trimmed = input.trim()
-    const searchStatus = trimmed.length < 2 ? 'idle'
-        : searchResult?.search !== trimmed ? 'loading'
-            : searchResult.data ? 'ready' : 'error'
-    const results = searchStatus === 'ready' ? searchResult!.data!.routes : null
-    const places = searchStatus === 'ready' ? searchResult!.data!.searchMunicipalities : []
-
-    // --- Nærområde ---
-    // Stedet velges i profilen (Profile.tsx) og lagres på brukeren i databasen.
-    // Forsiden leser det bare, og viser turforslag derfra.
-    const [token] = useState(() => localStorage.getItem(TOKEN_KEY))
-    const [home, setHome] = useState<Municipality | null>(null)
-    // Sted valgt fra søkefeltet. Gjelder bare nå og lagres ikke, men går foran stedet i profilen.
-    const [place, setPlace] = useState<Municipality | null>(null)
-    const area = place ?? home
-    const nearbyRef = useRef<HTMLElement>(null)
-    const [suggestionResult, setSuggestionResult] = useState<{ key: string; items: RouteGroup[] | null } | null>(null)
-
-    // Henter stedet som er lagret på brukeren, hvis man er logget inn
-    useEffect(() => {
-        if (!token) return
-        const controller = new AbortController()
-        graphql<{ me: { homeMunicipality: Municipality | null } | null }>(
-            'query($token:String!){me(token:$token){homeMunicipality{code name}}}', { token }, controller.signal)
-            .then(data => setHome(data.me?.homeMunicipality ?? null))
-            .catch(() => undefined)
-        return () => controller.abort()
-    }, [token])
-
-    // Turforslag: fra brukerens sted hvis det er valgt, ellers de mest populære turene i hele Norge.
-    // Filtreringen skjer i databasen, ikke på klienten.
-    const suggestionKey = area?.code ?? ''
-    useEffect(() => {
-        const controller = new AbortController()
-        const request = suggestionKey
-            ? graphql<RoutePage>(ROUTES_QUERY, { search: '', municipality: suggestionKey, limit: 6 }, controller.signal)
-                .then(data => data.routes.items)
-            : graphql<{ popularRoutes: PopularRoute[] }>(POPULAR_QUERY, { limit: 6 }, controller.signal)
-                .then(data => data.popularRoutes.map(popularToGroup))
-        request
-            .then(items => setSuggestionResult({ key: suggestionKey, items }))
-            .catch(() => { if (!controller.signal.aborted) setSuggestionResult({ key: suggestionKey, items: null }) })
-        return () => controller.abort()
-    }, [suggestionKey])
-    const suggestionStatus = suggestionResult?.key !== suggestionKey ? 'loading'
-        : suggestionResult.items ? 'ready' : 'error'
-    const suggestions = suggestionResult?.items ?? []
-
-    function choosePlace(chosen: Place) {
-        setPlace({ code: chosen.code, name: chosen.name })
-        setInput('')
-        // Flytt synet (og fokus for skjermlesere) ned til turene i det valgte stedet
-        window.requestAnimationFrame(() => {
-            nearbyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-            nearbyRef.current?.focus({ preventScroll: true })
-        })
-    }
-
-    return <>
-        <SiteNav active="home" authenticated={authenticated} onHome={()=>window.scrollTo({top:0,behavior:'smooth'})} onExplore={onExploreClick} onProfile={authenticated?onProfileClick:onLoginClick} />
-        <main id="main" className="home-main">
-            <section
-                className="home-hero"
-                aria-labelledby="home-title"
-                style={HERO_IMAGE_URL ? { backgroundImage: `url("${HERO_IMAGE_URL}")` } : undefined}
-            >
-                <div className="home-hero-content">
-                    <p className="home-eyebrow">DITT NESTE PUSTEROM</p>
-                    <h1 id="home-title">Finn veien<br />til litt mer ute.</h1>
-                    <p className="home-intro">Små avbrekk. Lange eventyr.<br />Utforsk turer og finn din egen vei.</p>
-                    <form className="home-search" role="search" onSubmit={event => {event.preventDefault();if(trimmed.length<2)document.getElementById('home-search-input')?.focus();else document.getElementById('home-search-results')?.scrollIntoView({behavior:'smooth',block:'nearest'})}}>
-                        <label htmlFor="home-search-input" className="visually-hidden">Søk etter turer</label>
-                        <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" strokeWidth="2.5" /><path d="m15.5 15.5 5 5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
-                        <input
-                            id="home-search-input"
-                            type="search"
-                            placeholder="Hvor vil du gå? Søk etter en rute eller et sted"
-                            autoComplete="off"
-                            maxLength={120}
-                            value={input}
-                            onChange={event => setInput(event.target.value)}
-                            aria-describedby="home-search-status"
-                        />
-                        <button type="submit" className="home-find-button">Finn turer <span aria-hidden="true">→</span></button>
-                    </form>
-                    <div className="home-search-results" id="home-search-results">
-                        <p id="home-search-status" role="status" className={searchStatus === 'ready' ? '' : 'visually-hidden'}>
-                            {searchStatus === 'loading' && 'Søker …'}
-                            {searchStatus === 'error' && 'Søket feilet. Kontroller at backend kjører.'}
-                            {searchStatus === 'ready' && (results?.total || places.length
-                                ? [places.length ? `${places.length} ${places.length === 1 ? 'sted' : 'steder'}` : '',
-                                    results?.total ? `${results.total.toLocaleString('nb-NO')} turer${results.total > results.items.length ? ` (viser ${results.items.length})` : ''}` : '']
-                                    .filter(Boolean).join(' og ')
-                                : 'Ingen steder eller turer passer søket.')}
-                        </p>
-                        {searchStatus === 'ready' && (places.length > 0 || (results && results.items.length > 0)) && <div className="home-search-panel">
-                        {places.length > 0 && <>
-                            <h3 className="home-search-group">Steder</h3>
-                            <ul>
-                                {places.map(item => <li key={item.code}>
-                                    <button type="button" onClick={() => choosePlace(item)}>
-                                        <strong>{item.name}</strong>
-                                        <span>{item.routeCount.toLocaleString('nb-NO')} turer</span>
-                                    </button>
-                                </li>)}
-                            </ul>
-                        </>}
-                        {results && results.items.length > 0 && <>
-                        <h3 className="home-search-group">Turer</h3>
-                        <ul>
-                            {results.items.map(group => <li key={group.key}>
-                                <button type="button" onClick={() => onSelectRoute(group.variants[0])}>
-                                    <strong>{group.name}</strong>
-                                    <span>{group.variantCount > 1 ? `${group.variantCount} varianter · ` : ''}{formatLength(group)}</span>
-                                </button>
-                            </li>)}
-                        </ul>
-                        </>}
-                        </div>}
-                    </div>
-                </div>
-                {HERO_IMAGE_CREDIT && <p className="home-hero-credit">{HERO_IMAGE_CREDIT}</p>}
-            </section>
-
-            <section className="home-nearby" aria-labelledby="nearby-title" ref={nearbyRef} tabIndex={-1}>
-                <h2 id="nearby-title">{area ? `Velg din neste tur i ${area.name}` : 'Velg din neste tur'}</h2>
-                {!area && <p className="home-nearby-subtitle">De mest populære turene i Norge</p>}
-                {place && <button type="button" className="text-button home-nearby-reset" onClick={() => setPlace(null)}>
-                    {home ? `Tilbake til ${home.name}` : 'Vis de mest populære turene'}
-                </button>}
-                {suggestionStatus === 'loading' && <p role="status">Henter turforslag …</p>}
-                {suggestionStatus === 'error' && <p role="alert">Kunne ikke hente turforslag. Kontroller at backend kjører.</p>}
-                {suggestionStatus === 'ready' && suggestions.length === 0 && <p>Fant ingen registrerte turer{area ? ` i ${area.name}` : ''}.</p>}
-                {suggestionStatus === 'ready' && suggestions.length > 0 && <ul className="home-suggestions">
-                    {suggestions.map(group => {
-                        const first = group.variants[0]
-                        return <li key={group.key}>
-                            <button type="button" onClick={() => onSelectRoute(first)}>
-                                <strong>{group.name}</strong>
-                                <span className="home-suggestion-length">{formatLength(group)}</span>
-                                <span className="home-suggestion-meta">{[first.difficulty, first.routeType].filter(Boolean).join(' · ') || 'Turrute'}</span>
-                                {group.favoriteCount ? <span className="home-suggestion-meta">Lagret av {group.favoriteCount} {group.favoriteCount === 1 ? 'bruker' : 'brukere'}</span> : null}
-                            </button>
-                        </li>
-                    })}
-                </ul>}
-            </section>
-        </main>
-    </>
-}
diff --git a/src/Profile.css b/src/Profile.css
deleted file mode 100644
index b57d9fb..0000000
--- a/src/Profile.css
+++ /dev/null
@@ -1,253 +0,0 @@
-.profile-panel {
-  margin-top: 32px;
-  padding: 26px;
-  background: #fff;
-  border: 1px solid #dce1d7;
-  border-radius: 16px;
-}
-
-.profile-panel h2 {
-  margin: 5px 0 18px;
-}
-
-.profile-panel h3 {
-  margin-top: 26px;
-}
-
-.profile-form {
-  display: grid;
-  gap: 14px;
-  max-width: 420px;
-}
-
-.profile-form label {
-  display: grid;
-  gap: 6px;
-  font-weight: 600;
-}
-
-.profile-form input {
-  font: inherit;
-  border: 1px solid #9cac9e;
-  border-radius: 8px;
-  padding: 11px;
-}
-
-.profile-heading {
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-.text-button {
-  background: transparent;
-  color: #185b45;
-  padding: 7px 0;
-  text-decoration: underline;
-}
-
-.favorite-list {
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.favorite-list button {
-  width: 100%;
-  text-align: left;
-  background: #edf2e9;
-  color: #203b32;
-}
-
-.favorite-list span,
-.favorite-list strong {
-  display: block;
-}
-
-.favorite-list span {
-  font-size: 11px;
-  margin-top: 5px;
-}
-
-@media (max-width: 800px) {
-  .favorite-list {
-    grid-template-columns: 1fr;
-  }
-}
-
-.profile-identity {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.profile-avatar {
-  width: 58px;
-  height: 58px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid #dce1d7;
-}
-
-.profile-initial {
-  display: grid;
-  place-items: center;
-  background: #126b51;
-  color: white;
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.profile-settings {
-  margin: 20px 0;
-  padding: 16px 0;
-  border-top: 1px solid #e1e5dd;
-  border-bottom: 1px solid #e1e5dd;
-}
-
-.profile-settings summary {
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.profile-settings .profile-form {
-  margin-top: 18px;
-}
-
-.profile-settings input[type=file] {
-  background: #f7f8f4;
-}
-
-.remove-avatar {
-  justify-self: start;
-}
-
-.auth-page {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f7f7f1 0%, #e7efe5 100%);
-}
-
-.auth-main {
-  min-height: calc(100vh - 90px);
-  display: grid;
-  place-items: center;
-  padding: 40px 20px;
-}
-
-.auth-card {
-  width: min(100%, 540px);
-  padding: 42px;
-  background: #fff;
-  border: 1px solid #dce1d7;
-  border-radius: 20px;
-  box-shadow: 0 20px 60px #233a3018;
-}
-
-.auth-intro {
-  margin-bottom: 28px;
-}
-
-.auth-intro h1 {
-  font-size: clamp(34px, 5vw, 50px);
-  line-height: 1.05;
-  margin: 10px 0 14px;
-}
-
-.auth-intro>p:last-child {
-  color: #5a6c61;
-}
-
-.auth-card .profile-form {
-  max-width: none;
-}
-
-.auth-card .profile-form button {
-  margin-top: 4px;
-}
-
-.auth-card>.text-button {
-  margin-top: 18px;
-}
-
-.auth-error {
-  color: #9b2c20;
-}
-
-@media (max-width: 600px) {
-  .auth-main {
-    min-height: calc(100vh - 72px);
-    padding: 24px 16px;
-  }
-
-  .auth-card {
-    padding: 28px 22px;
-  }
-}
-
-/* Logoen på innloggingssiden er en knapp. Nullstill knappestilen så den ser ut som før,
-   men vis pekermus. Fokusmarkeringen for tastatur beholdes av hensyn til tilgjengelighet. */
-.brand-button {
-  background: none;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  color: inherit;
-  font-family: inherit;
-  cursor: pointer;
-}
-.badge-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
-.badge-heading > span { font-size: 12px; color: #647267; }
-.badge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; }
-.achievement { display: flex; gap: 12px; align-items: start; padding: 16px; border: 1px solid #dce1d7; border-radius: 12px; background: #f5f6f0; }
-.achievement.earned { background: #e7f1e9; border-color: #126b51; }
-.achievement-symbol { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #e0e5dc; font-size: 20px; font-weight: 700; }
-.earned .achievement-symbol { background: #126b51; color: white; }
-.achievement strong { font-size: 14px; }
-.achievement-state { display: block; font-size: 11px; font-weight: 600; margin-top: 4px; }
-.achievement p { font-size: 12px; color: #647267; margin-bottom: 0; }
-@media(max-width:900px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
-@media(max-width:600px){.badge-grid{grid-template-columns:1fr}}
-.monthly-goal { background: #f5f6f0; border: 1px solid #dce1d7; border-radius: 14px; padding: 20px; margin: 20px 0; }
-.monthly-goal h3 { margin: 0 0 14px; }
-.monthly-goal form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
-.monthly-goal label { display: grid; gap: 6px; font-size: 13px; }
-.monthly-goal input { font: inherit; border: 1px solid #9cac9e; border-radius: 8px; padding: 10px; min-width: 0; }
-.goal-progress progress { width: 100%; height: 16px; accent-color: #126b51; }
-.trip-diary { border-top: 1px solid #dce1d7; padding-top: 14px; margin-top: 14px; }
-.trip-diary summary { cursor: pointer; font-weight: 600; }
-.trip-diary form { display: grid; gap: 12px; margin-top: 14px; }
-.trip-diary label { display: grid; gap: 6px; font-size: 13px; }
-.trip-diary input,.trip-diary select,.trip-diary textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid #9cac9e; border-radius: 8px; background: white; }
-.trip-diary textarea { resize: vertical; }
-.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 22px; }
-.profile-stats > div { padding: 20px; border-radius: 12px; background: #edf2e9; }
-.profile-stats strong { display: block; font-size: 28px; color: #126b51; }
-.profile-stats span,.stats-help { color: #647267; font-size: 12px; }
-.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; border-bottom: 1px solid #dce1d7; padding-bottom: 14px; }
-.profile-tabs button { background: #f5f6f0; color: #203b32; border: 2px solid transparent; }
-.profile-tabs button[aria-pressed=true],.selected-trip-actions button[aria-pressed=true] { background: #e7f1e9; color: #126b51; border: 2px solid #126b51; }
-.selected-trip-actions button { margin: 0 8px 8px 0; border: 2px solid transparent; }
-.profile-empty { background: #f5f6f0; border-radius: 12px; padding: 26px; }
-.profile-empty p { color: #647267; }
-.favorite-list li { background: #edf2e9; border: 1px solid #dce1d7; border-radius: 12px; padding: 12px; }
-.favorite-list .trip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.favorite-list .trip-actions button { width: auto; font-size: 12px; background: white; border: 1px solid #9cac9e; padding: 8px; }
-@media(max-width:600px){.profile-stats{grid-template-columns:1fr}.profile-heading{flex-wrap:wrap}.profile-tabs button{flex:1 1 40%}}
-@media (max-width: 600px) { .auth-main { min-height: calc(100vh - 72px); padding: 24px 16px; } .auth-card { padding: 28px 22px; } }
-
-.profile-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 28px; }
-.profile-split .profile-tabs { display: flex; flex-direction: column; align-self: start; gap: 6px; margin: 0; padding: 0 20px 0 0; border-bottom: 0; border-right: 1px solid #e0e6dc; }
-.profile-split .profile-tabs button { text-align: left; width: 100%; padding: 13px 15px; border-radius: 9px; font-size: 14px; }
-.profile-content { min-width: 0; }
-.profile-content > div > h3:first-child { margin-top: 0; }
-@media(max-width: 720px) { .profile-split { grid-template-columns: 1fr; gap: 22px; } .profile-split .profile-tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #e0e6dc; padding: 0 0 16px; } .profile-split .profile-tabs button { flex: 1 1 40%; width: auto; } }
-
-.password-field { position: relative; display: block; min-width: 0; border: 1px solid #9cac9e; border-radius: 8px; background: #fff; }
-.password-field:focus-within { outline: 2px solid #b9803c; outline-offset: 3px; }
-.profile-form .password-field input { box-sizing: border-box; width: calc(100% - 48px); border: 0; background: transparent; padding-right: 11px; outline: none; box-shadow: none; }
-.profile-form .password-field .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: #435e46; cursor: pointer; }
-.profile-form .password-field .password-toggle:hover { background: #e9efe4; }
-.profile-form .password-field .password-toggle:focus-visible { outline: 2px solid #435e46; outline-offset: 2px; }
diff --git a/src/Profile.tsx b/src/Profile.tsx
deleted file mode 100644
index ac3f964..0000000
--- a/src/Profile.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-import SiteNav from './SiteNav'
-import { useEffect, useState, type ChangeEvent, type FormEvent, type ComponentProps } from 'react'
-import './Profile.css'
-import {TOKEN_KEY} from './graphql'
-
-type Favorite = { id: string; name: string; number: string; createdAt: string }
-type TripStatus = 'PLANNED' | 'COMPLETED'
-type UserTrip = Favorite & { status: TripStatus; updatedAt: string; lengthMeters: number | null; completedOn: string | null; diaryNote: string | null; rating: number | null }
-function isUserTrip(item: Favorite | UserTrip): item is UserTrip { return 'status' in item }
-type Municipality={code:string;name:string}
-const PROFILE_FIELDS = 'username email phone avatar homeMunicipality{code name} favorites{id name number createdAt} trips{id name number status updatedAt lengthMeters completedOn diaryNote rating} goals{month target} stats{completedCount plannedCount totalLengthMeters countyCount}'
-type UserProfile = { username: string; email: string | null; phone: string | null; avatar: string | null; homeMunicipality:Municipality|null; favorites: Favorite[]; trips: UserTrip[]; goals: { month: string; target: number }[]; stats: { completedCount: number; plannedCount: number; totalLengthMeters: number; countyCount: number } }
-type SelectedRoute = { id?: string; name: string; number: string }
-
-async function graphQL(query: string, variables: Record<string, string | number | null>, signal = AbortSignal.timeout(15000)) {
-  const response = await fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, signal, body: JSON.stringify({ query, variables }) })
-  const result = await response.json().catch(() => {
-    throw new Error('Kunne ikke kontakte innloggingstjenesten. Kontroller at backend kjører, og prøv igjen.')
-  })
-  if (!response.ok || result.errors) throw new Error(result.errors?.[0]?.message || 'Forespørselen mislyktes.')
-  if (!result.data) throw new Error('Innloggingstjenesten ga et ugyldig svar. Prøv igjen.')
-  return result.data
-}
-
-function PasswordInput(props: Omit<ComponentProps<'input'>, 'type'>) {
-  const [visible, setVisible] = useState(false)
-  return <span className="password-field"><input {...props} type={visible?'text':'password'} /><button type="button" className="password-toggle" aria-label={visible?'Skjul passord':'Vis passord'} aria-pressed={visible} aria-controls={props.id} onClick={()=>setVisible(!visible)}>
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/>{visible&&<path d="m3 3 18 18"/>}</svg>
-  </button></span>
-}
-
-export function AuthGate({ onAuthenticated,onSkip,onHome }: { onAuthenticated: () => void;onSkip:()=>void;onHome?:()=>void }) {
-  const resetToken = window.location.hash.startsWith('#reset-password/') ? window.location.hash.split('/')[1] : ''
-  const [mode, setMode] = useState<'login'|'register'|'forgot'|'reset'>(resetToken ? 'reset' : 'login')
-  const [username, setUsername] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirm, setConfirm] = useState('')
-  const [message, setMessage] = useState('')
-  const [error, setError] = useState(false)
-  const [busy, setBusy] = useState(false)
-  const [checking, setChecking] = useState(() => !resetToken && Boolean(localStorage.getItem(TOKEN_KEY)))
-  useEffect(() => {
-    const token = localStorage.getItem(TOKEN_KEY)
-    if (!token || resetToken) return
-    const controller = new AbortController()
-    void graphQL('query($token:String!){me(token:$token){username}}', {token}, AbortSignal.any([controller.signal, AbortSignal.timeout(15000)]))
-      .then(data => { if (!controller.signal.aborted) { if(data.me) onAuthenticated(); else localStorage.removeItem(TOKEN_KEY) } })
-      .catch(() => { if (!controller.signal.aborted) { setError(true); setMessage('Kunne ikke kontrollere innloggingen. Prøv igjen.') } })
-      .finally(() => { if (!controller.signal.aborted) setChecking(false) })
-    return () => controller.abort()
-  }, [onAuthenticated, resetToken])
-  function changeMode(next: typeof mode) { setMode(next); setMessage(''); setError(false); setPassword(''); setConfirm('') }
-  async function submit(event: FormEvent) {
-    event.preventDefault(); setBusy(true); setMessage(''); setError(false)
-    try {
-      if ((mode === 'register' || mode === 'reset') && password !== confirm) throw new Error('Passordene er ikke like.')
-      if (mode === 'forgot') {
-        await graphQL('mutation($email:String!){requestPasswordReset(email:$email)}', {email:email.trim()})
-        setMessage('Hvis adressen er knyttet til en profil, får den en tilbakestillingslenke. Lenken gjelder i 30 minutter.')
-      } else if (mode === 'reset') {
-        await graphQL('mutation($token:String!,$newPassword:String!){resetPassword(token:$token,newPassword:$newPassword)}', {token:resetToken,newPassword:password})
-        localStorage.removeItem(TOKEN_KEY); window.history.replaceState(null,'',window.location.pathname + window.location.search + '#profile')
-        changeMode('login'); setMessage('Passordet er endret. Logg inn med det nye passordet.')
-      } else {
-        const query = mode === 'register' ? 'mutation($username:String!,$password:String!,$email:String!){register(username:$username,password:$password,email:$email){token}}' : 'mutation($username:String!,$password:String!){login(username:$username,password:$password){token}}'
-        const data = await graphQL(query, {username:username.trim(),password,...(mode==='register'?{email:email.trim()}:{})})
-        localStorage.setItem(TOKEN_KEY,data[mode].token); onAuthenticated()
-      }
-    } catch(reason) { setError(true); setMessage(reason instanceof Error ? reason.message : 'Noe gikk galt. Prøv igjen.') }
-    finally { setBusy(false) }
-  }
-  return <div className="auth-page">
-    <SiteNav authenticated={false} onHome={onHome} onExplore={onSkip} />
-    <main className="auth-main"><section className="auth-card" aria-labelledby="auth-title">
-      <div className="auth-intro"><p className="eyebrow">OPPDAG NORGE TIL FOTS</p><h1 id="auth-title">{mode==='register'?'Opprett din profil.':mode==='forgot'?'Glemt passord?':mode==='reset'?'Velg nytt passord.':'Velkommen tilbake.'}</h1>
-      <p>{mode==='forgot'?'Skriv inn e-postadressen på profilen din.':mode==='reset'?'Velg et nytt passord på minst 10 tegn.':mode==='register'?'Alle feltene er obligatoriske. E-post brukes til å gjenopprette tilgangen til profilen.':'Logg inn for å lagre favoritter og planlegge turer.'}</p></div>
-      {checking ? <p role="status">Kontrollerer innlogging …</p> : <>
-      <form onSubmit={submit} className="profile-form">
-        {(mode==='login'||mode==='register')&&<label htmlFor="auth-username">Brukernavn<input id="auth-username" value={username} onChange={event=>setUsername(event.target.value)} autoComplete="username" required minLength={3} maxLength={30} aria-describedby={mode==='register'?'username-help':undefined}/>{mode==='register'&&<small id="username-help">3–30 tegn: bokstaver, tall, punktum, bindestrek eller understrek.</small>}</label>}
-        {(mode==='register'||mode==='forgot')&&<label htmlFor="auth-email">E-postadresse (obligatorisk)<input id="auth-email" type="email" value={email} onChange={event=>setEmail(event.target.value)} autoComplete="email" required maxLength={254}/></label>}
-        {mode!=='forgot'&&<label htmlFor="auth-password">{mode==='reset'?'Nytt passord':'Passord'}<PasswordInput id="auth-password" value={password} onChange={event=>setPassword(event.target.value)} autoComplete={mode==='login'?'current-password':'new-password'} required minLength={10} maxLength={200} aria-describedby="password-help"/><small id="password-help">Minst 10 tegn.</small></label>}
-        {(mode==='register'||mode==='reset')&&<label htmlFor="auth-confirm">Bekreft passord<PasswordInput id="auth-confirm" value={confirm} onChange={event=>setConfirm(event.target.value)} autoComplete="new-password" required minLength={10} maxLength={200}/></label>}
-        <button disabled={busy}>{busy?'Vennligst vent …':mode==='register'?'Opprett profil':mode==='forgot'?'Send tilbakestillingslenke':mode==='reset'?'Lagre nytt passord':'Logg inn'}</button>
-      </form>
-      {message&&<p role={error?'alert':'status'} className={error?'auth-error':'auth-feedback'}>{message}</p>}
-      {mode==='login'&&<button type="button" className="text-button" disabled={busy} onClick={()=>changeMode('forgot')}>Glemt passord?</button>}
-      <button type="button" className="text-button" disabled={busy} onClick={()=>changeMode(mode==='login'?'register':'login')}>{mode==='login'?'Ny bruker? Opprett profil':'Tilbake til innlogging'}</button>
-      </>}
-    </section></main>
-  </div>
-}
-
-export default function Profile({ selected, onSelectRoute, disabled, onLogout, onExplore }: { selected: SelectedRoute | null, onSelectRoute: (route: SelectedRoute) => void, disabled: boolean, onLogout?: () => void, onExplore: () => void }) {
-  const [user, setUser] = useState<UserProfile | null>(null)
-  const [message, setMessage] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [loadingProfile, setLoadingProfile] = useState(true)
-  const [goalMonth, setGoalMonth] = useState(() => { const now = new Date(); return `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}` })
-  const [passwordMessage, setPasswordMessage] = useState('')
-  const [tab, setTab] = useState<'overview'|'favorites'|'trips'|'settings'>('overview')
-  useEffect(() => {
-    const syncTab = () => {
-      setMessage('')
-      setPasswordMessage('')
-      const target = window.location.hash.split('/')[1]
-      if (target === 'overview' || target === 'favorites' || target === 'settings' || target === 'trips') setTab(target)
-      else if (target === 'planned' || target === 'completed') setTab('trips')
-      else if (target === 'custom') setTab('favorites')
-    }
-    syncTab()
-    window.addEventListener('hashchange', syncTab)
-    return () => window.removeEventListener('hashchange', syncTab)
-  }, [])
-
-  const token = localStorage.getItem(TOKEN_KEY)
-
-  const [municipalities,setMunicipalities]=useState<Municipality[]>([])
-  const loggedIn=Boolean(user)
-  // Kommunelisten til «Mitt sted» hentes først når brukeren er logget inn
-  useEffect(() => {
-    if (!loggedIn) return
-    const controller = new AbortController()
-    void graphQL('query{areas{municipalities{code name}}}', {}, controller.signal)
-      .then(data => setMunicipalities(data.areas.municipalities))
-      .catch(() => undefined)
-    return () => controller.abort()
-  }, [loggedIn])
-
-  useEffect(() => {
-    if (!token || disabled) return
-    const controller=new AbortController()
-    void graphQL(`query($token:String!){me(token:$token){${PROFILE_FIELDS}}}`, { token },AbortSignal.any([controller.signal,AbortSignal.timeout(15000)]))
-      .then(data => { if(controller.signal.aborted)return; setUser(data.me); if (!data.me) { localStorage.removeItem(TOKEN_KEY); onLogout?.() } })
-      .catch(() => {if(!controller.signal.aborted)setMessage('Kunne ikke hente profilen. Oppdater siden for å prøve igjen.')})
-      .finally(() => {if(!controller.signal.aborted)setLoadingProfile(false)})
-    return ()=>controller.abort()
-  }, [token, disabled, onLogout])
-
-  async function toggleFavorite() {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken || !selected?.id) return
-    setBusy(true); setMessage('')
-    try {
-      const data = await graphQL(`mutation($token:String!,$routeId:ID!){toggleFavorite(token:$token,routeId:$routeId){${PROFILE_FIELDS}}}`, { token: currentToken, routeId: selected.id })
-      setUser(data.toggleFavorite)
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Noe gikk galt.') }
-    finally { setBusy(false) }
-  }
-
-  async function setTripStatus(routeId: string, status: TripStatus | null) {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken) return
-    setBusy(true); setMessage('')
-    try {
-      const data = await graphQL(`mutation($token:String!,$routeId:ID!,$status:TripStatus){setTripStatus(token:$token,routeId:$routeId,status:$status){${PROFILE_FIELDS}}}`, { token: currentToken, routeId, status })
-      setUser(data.setTripStatus)
-      setMessage(status === 'COMPLETED' ? 'Turen er markert som gjennomført.' : status === 'PLANNED' ? 'Turen er lagt til planlagte turer.' : 'Turstatusen er fjernet.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Kunne ikke lagre turstatus.') }
-    finally { setBusy(false) }
-  }
-
-  async function saveDiary(routeId: string, form: HTMLFormElement, clear = false) {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken) return
-    const values = new FormData(form)
-    setBusy(true); setMessage('')
-    try {
-      const data = await graphQL(`mutation($token:String!,$routeId:ID!,$completedOn:String,$diaryNote:String,$rating:Int){saveTripDiary(token:$token,routeId:$routeId,completedOn:$completedOn,diaryNote:$diaryNote,rating:$rating){${PROFILE_FIELDS}}}`, {
-        token: currentToken, routeId,
-        completedOn: clear ? null : String(values.get('completedOn') || '') || null,
-        diaryNote: clear ? null : String(values.get('diaryNote') || ''),
-        rating: clear || !values.get('rating') ? null : Number(values.get('rating')),
-      })
-      setUser(data.saveTripDiary); setMessage(clear ? 'Dagbokopplysningene er fjernet. Turen er fortsatt gjennomført.' : 'Turdagboken er lagret.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Kunne ikke lagre dagboken.') }
-    finally { setBusy(false) }
-  }
-
-  async function saveGoal(target: number | null) {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken) return
-    setBusy(true); setMessage('')
-    try {
-      const data = await graphQL(`mutation($token:String!,$month:String!,$target:Int){setMonthlyGoal(token:$token,month:$month,target:$target){${PROFILE_FIELDS}}}`, { token: currentToken, month: goalMonth, target })
-      setUser(data.setMonthlyGoal); setMessage(target == null ? 'Turmålet er fjernet.' : 'Turmålet er lagret.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Kunne ikke lagre turmålet.') }
-    finally { setBusy(false) }
-  }
-
-  async function changePassword(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    const form = event.currentTarget
-    const values = new FormData(form)
-    const currentPassword = String(values.get('currentPassword') || '')
-    const newPassword = String(values.get('newPassword') || '')
-    if (newPassword !== values.get('confirmPassword')) { setPasswordMessage('De nye passordene er ikke like.'); return }
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken) return
-    setBusy(true); setPasswordMessage('')
-    try {
-      await graphQL('mutation($token:String!,$currentPassword:String!,$newPassword:String!){changePassword(token:$token,currentPassword:$currentPassword,newPassword:$newPassword)}', { token: currentToken, currentPassword, newPassword })
-      form.reset()
-      localStorage.removeItem(TOKEN_KEY)
-      setUser(null); onLogout?.()
-    } catch (error) { setPasswordMessage(error instanceof Error ? error.message : 'Kunne ikke endre passordet.') }
-    finally { setBusy(false) }
-  }
-
-  async function logout() {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    localStorage.removeItem(TOKEN_KEY); setUser(null); setMessage(''); onLogout?.()
-    if (currentToken) void graphQL('mutation($token:String!){logout(token:$token)}', { token: currentToken }).catch(() => undefined)
-  }
-
-  async function saveProfile(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken || !user) return
-    setBusy(true); setMessage('')
-    const form = new FormData(event.currentTarget)
-    try {
-      const data = await graphQL(`mutation($token:String!,$email:String,$phone:String,$avatar:String){updateProfile(token:$token,email:$email,phone:$phone,avatar:$avatar){${PROFILE_FIELDS}}}`, {
-        token: currentToken, email: String(form.get('email') || ''), phone: String(form.get('phone') || ''), avatar: user.avatar || '',
-      })
-      setUser(data.updateProfile); setMessage('Profilen er lagret.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Noe gikk galt.') }
-    finally { setBusy(false) }
-  }
-
-  async function saveHomeMunicipality(code: string) {
-    const currentToken = localStorage.getItem(TOKEN_KEY)
-    if (!currentToken) return
-    setBusy(true); setMessage('')
-    try {
-      const data = await graphQL(`mutation($token:String!,$code:String){setHomeMunicipality(token:$token,code:$code){${PROFILE_FIELDS}}}`, { token: currentToken, code })
-      setUser(data.setHomeMunicipality); setMessage('Stedet er lagret.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Noe gikk galt.') }
-    finally { setBusy(false) }
-  }
-
-  function chooseAvatar(event: ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0]
-    if (!file) return
-    if (!['image/png','image/jpeg','image/webp','image/gif'].includes(file.type) || file.size > 450000) { setMessage('Velg et bilde som er mindre enn 450 KB.'); return }
-    const reader = new FileReader()
-    reader.onload = () => setUser(current => current ? { ...current, avatar: String(reader.result) } : current)
-    reader.readAsDataURL(file)
-  }
-
-  if (disabled) return <section className="profile-panel"><h2>Min profil</h2><p>Profil er tilgjengelig når løsningen kjøres med backend og PostgreSQL.</p></section>
-  if (loadingProfile || (!user && token)) return <section id="profile" className="profile-panel"><h2>Min profil</h2><p role="status">{message || 'Henter profilen …'}</p><button className="text-button" onClick={logout}>Logg ut</button></section>
-  if (!user) return <AuthGate onAuthenticated={()=>window.location.reload()} onSkip={onExplore} onHome={onExplore} />
-
-  const favorite = Boolean(selected?.id && user.favorites.some(item => item.id === selected.id))
-  const goal = user.goals.find(item => item.month === goalMonth)
-  const monthlyCompleted = user.trips.filter(item => item.status === 'COMPLETED' && item.completedOn?.startsWith(`${goalMonth}-`)).length
-  const completedTrips = user.trips.filter(item => item.status === 'COMPLETED')
-  const hasReachedGoal = user.goals.some(item => completedTrips.filter(trip => trip.completedOn?.startsWith(`${item.month}-`)).length >= item.target)
-  const badges = [
-    { id: 'first', symbol: '✓', title: 'Første tur', description: 'Marker én tur som gjennomført.', unlocked: completedTrips.length >= 1 },
-    { id: 'five', symbol: '5', title: 'Fem turer', description: 'Gjennomfør fem forskjellige ruter.', unlocked: completedTrips.length >= 5 },
-    { id: 'ten', symbol: '10', title: 'Ti turer', description: 'Gjennomfør ti forskjellige ruter.', unlocked: completedTrips.length >= 10 },
-    { id: 'counties', symbol: '⌖', title: 'På tvers av fylker', description: 'Gjennomfør ruter som til sammen berører minst tre fylker.', unlocked: user.stats.countyCount >= 3 },
-    { id: 'diary', symbol: '✎', title: 'Første dagboknotat', description: 'Skriv et notat i dagboken til en gjennomført tur.', unlocked: completedTrips.some(item => Boolean(item.diaryNote?.trim())) },
-    { id: 'goal', symbol: '★', title: 'Månedsmål nådd', description: 'Nå et lagret turmål med daterte turer i den måneden.', unlocked: hasReachedGoal },
-  ]
-  return <section id="profile" className="profile-panel"><div className="profile-heading"><div className="profile-identity">
-    {user.avatar ? <img className="profile-avatar" src={user.avatar} alt="Profilbilde" /> : <span className="profile-avatar profile-initial" aria-hidden="true">{user.username.charAt(0).toLocaleUpperCase('nb-NO')}</span>}
-    <div><p className="eyebrow">MINE TURER</p><h2>{user.username}</h2></div></div><button className="text-button" onClick={logout}>Logg ut</button></div>
-    <div className="profile-split">
-    <nav className="profile-tabs" aria-label="Mine turer">
-      {([['overview', 'Oversikt'], ['favorites', `Favoritter (${user.favorites.length})`], ['trips', `Mine turer (${user.trips.length})`], ['settings', 'Innstillinger']] as const).map(([key,label]) => <button key={key} aria-pressed={tab === key} aria-controls="profile-tab-content" onClick={() => { setMessage(''); setPasswordMessage(''); setTab(key); window.location.hash = `profile/${key}` }}>{label}</button>)}
-    </nav>
-    <div className="profile-content">
-    {!user.email && <p className="profile-email-notice">Legg til e-post for å kunne tilbakestille passordet. <button type="button" className="text-button" onClick={()=>{setTab('settings');window.location.hash='profile/settings'}}>Legg til e-post</button></p>}
-    {message && <p role="status">{message}</p>}
-    {tab === 'overview' && <div id="profile-tab-content">
-    <div className="profile-stats" aria-label="Din turstatistikk">
-      <div><strong>{user.stats.completedCount}</strong><span>Gjennomførte turer</span></div>
-      <div><strong>{(user.stats.totalLengthMeters / 1000).toLocaleString('nb-NO', { maximumFractionDigits: 1 })} km</strong><span>Registrert rutelengde</span></div>
-      <div><strong>{user.stats.countyCount}</strong><span>Fylker rutene berører</span></div>
-    </div>
-    <p className="stats-help">Basert på turene du markerer som gjennomført. Lengden er registrert rutelengde, ikke målt distanse du har gått.</p>
-    <section className="monthly-goal" aria-labelledby="goal-heading">
-      <h3 id="goal-heading">Ditt turmål</h3>
-      <form key={`${goalMonth}-${goal?.target || ''}`} onSubmit={event => { event.preventDefault(); const values = new FormData(event.currentTarget); void saveGoal(Number(values.get('target'))) }}>
-        <label>Måned<input type="month" value={goalMonth} required onChange={event => setGoalMonth(event.target.value)} /></label>
-        <label>Antall turer<input type="number" name="target" min="1" max="1000" step="1" required defaultValue={goal?.target || 4} /></label>
-        <button disabled={busy || !goalMonth} type="submit">{goal ? 'Endre mål' : 'Sett turmål'}</button>
-        {goal && <button disabled={busy} className="text-button" type="button" onClick={() => void saveGoal(null)}>Fjern mål</button>}
-      </form>
-      {goal ? <div className="goal-progress"><p role="status"><strong>{monthlyCompleted} av {goal.target} turer</strong> · {monthlyCompleted >= goal.target ? 'Målet er nådd!' : `${goal.target-monthlyCompleted} igjen`}</p><progress value={Math.min(monthlyCompleted, goal.target)} max={goal.target} aria-label={`${monthlyCompleted} av ${goal.target} turer gjennomført`} /></div> : <p>Sett et mål for måneden og følg fremdriften din.</p>}
-      <p className="stats-help">Turer teller når de er markert gjennomført og har en dato i turdagboken i denne måneden. Hver rute telles én gang.</p>
-    </section>
-    {selected?.id && <div className="selected-trip-actions"><h3>{selected.name}</h3>
-      <button disabled={busy} aria-pressed={favorite} onClick={toggleFavorite}>{favorite ? 'Fjern fra favoritter' : 'Lagre som favoritt'}</button>
-      <button disabled={busy} aria-pressed={user.trips.some(t => t.id === selected.id && t.status === 'PLANNED')} onClick={() => void setTripStatus(selected.id!, 'PLANNED')}>Planlegg tur</button>
-      <button disabled={busy} aria-pressed={user.trips.some(t => t.id === selected.id && t.status === 'COMPLETED')} onClick={() => void setTripStatus(selected.id!, 'COMPLETED')}>Marker gjennomført</button>
-    </div>}
-    <section className="profile-badges" aria-labelledby="badges-heading">
-      <div className="badge-heading"><h3 id="badges-heading">Dine merker</h3><span>{badges.filter(item => item.unlocked).length} av {badges.length} oppnådd</span></div>
-      <ul className="badge-grid">{badges.map(item => <li key={item.id} className={item.unlocked ? 'achievement earned' : 'achievement'}>
-        <span className="achievement-symbol" aria-hidden="true">{item.symbol}</span>
-        <div><strong>{item.title}</strong><span className="achievement-state">{item.unlocked ? 'Oppnådd' : 'Ikke oppnådd ennå'}</span><p>{item.description}</p></div>
-      </li>)}</ul>
-      <p className="stats-help">Merkene følger din nåværende turhistorikk. Endrer eller fjerner du turstatus, notater eller mål, oppdateres merkene også.</p>
-    </section>
-
-    </div>}
-    {tab === 'settings' && <div id="profile-tab-content" className="profile-settings"><h3>Profilinnstillinger</h3>
-      <form className="profile-form" onSubmit={saveProfile}>
-        <label>Profilbilde<input type="file" accept="image/png,image/jpeg,image/webp" onChange={chooseAvatar} /></label>
-        {user.avatar && <button type="button" className="text-button remove-avatar" onClick={() => setUser({ ...user, avatar: null })}>Fjern profilbilde</button>}
-        <label>E-post (obligatorisk)<input name="email" type="email" required defaultValue={user.email || ''} autoComplete="email" maxLength={254} /></label>
-        <label>Telefonnummer<input name="phone" type="tel" defaultValue={user.phone || ''} autoComplete="tel" maxLength={20} /></label>
-        <label>Mitt sted (turforslag på forsiden)
-          <select value={user.homeMunicipality?.code ?? ''} disabled={busy} onChange={event => void saveHomeMunicipality(event.target.value)}>
-            <option value="">Ikke valgt</option>
-            {municipalities.map(m => <option key={m.code} value={m.code}>{m.name}</option>)}
-          </select>
-        </label>
-        <button disabled={busy}>Lagre profil</button>
-      </form>
-      <h3>Endre passord</h3>
-      <p>Når passordet endres, logges du ut på alle enheter. Logg inn igjen med det nye passordet.</p>
-      <form className="profile-form" onSubmit={changePassword}>
-        <label htmlFor="profile-currentPassword">Gjeldende passord<PasswordInput id="profile-currentPassword" name="currentPassword" autoComplete="current-password" required maxLength={200} /></label>
-        <label htmlFor="profile-newPassword">Nytt passord<PasswordInput id="profile-newPassword" name="newPassword" autoComplete="new-password" required minLength={10} maxLength={200} /></label>
-        <label htmlFor="profile-confirmPassword">Bekreft nytt passord<PasswordInput id="profile-confirmPassword" name="confirmPassword" autoComplete="new-password" required minLength={10} maxLength={200} /></label>
-        <button disabled={busy} type="submit">{busy ? 'Vennligst vent …' : 'Endre passord og logg ut'}</button>
-        {passwordMessage && <p role="alert">{passwordMessage}</p>}
-      </form>
-    </div>}
-    {(tab === 'favorites' || tab === 'trips') && <div id="profile-tab-content">
-      <h3>{tab === 'favorites' ? 'Favorittene dine' : 'Mine turer'}</h3>
-      {(tab === 'favorites' ? user.favorites : user.trips).length === 0 ? <div className="profile-empty"><strong>{tab === 'favorites' ? 'Finn en tur du vil ta vare på' : 'Planlegg din neste tur'}</strong><p>{tab === 'favorites' ? 'Åpne en rute og lagre den som favoritt.' : 'Velg en favoritt eller søk etter en rute og trykk Planlegg tur.'}</p><a href="#explore" onClick={event => { event.preventDefault(); onExplore() }}>Finn en tur →</a></div> :
-      <ul className="favorite-list">{(tab === 'favorites' ? user.favorites : user.trips).map(item => <li key={item.id}>
-        <button className="trip-open" onClick={() => onSelectRoute({ id: item.id, name: item.name, number: item.number })}><strong>{item.name}</strong><span>{tab === 'trips' && isUserTrip(item) ? (item.status === 'COMPLETED' ? 'Gjennomført · Åpne rute og kart' : 'Planlagt · Åpne rute og kart') : 'Åpne rute og kart'}</span></button>
-        <div className="trip-actions">
-          {(!isUserTrip(item) || item.status !== 'COMPLETED') && <button disabled={busy} onClick={() => void setTripStatus(item.id, 'COMPLETED')}>Gjennomført</button>}
-          {(!isUserTrip(item) || item.status !== 'PLANNED') && <button disabled={busy} onClick={() => void setTripStatus(item.id, 'PLANNED')}>Planlegg</button>}
-          {tab !== 'favorites' && <button disabled={busy} onClick={() => void setTripStatus(item.id, null)}>Fjern status</button>}
-        </div>
-        {tab === 'trips' && isUserTrip(item) && item.status === 'COMPLETED' && <details className="trip-diary"><summary>Turdagbok{item.completedOn ? ` · ${new Date(`${item.completedOn}T12:00:00`).toLocaleDateString('nb-NO')}` : ''}{item.rating ? ` · ${item.rating}/5` : ''}</summary>
-          <form key={`${item.id}-${item.updatedAt}`} onSubmit={event => { event.preventDefault(); void saveDiary(item.id, event.currentTarget) }}>
-            <label>Dato for turen<input name="completedOn" type="date" defaultValue={item.completedOn || ''} /></label>
-            <label>Din vurdering<select name="rating" defaultValue={item.rating || ''}><option value="">Ingen vurdering</option>{[1,2,3,4,5].map(value => <option key={value} value={value}>{value} av 5</option>)}</select></label>
-            <label>Notat<textarea name="diaryNote" defaultValue={item.diaryNote || ''} maxLength={2000} rows={4} placeholder="Hvordan var turen?" /></label>
-            <small>Kun synlig for deg. Maks 2000 tegn.</small>
-            <div className="trip-actions"><button disabled={busy} type="submit">Lagre dagbok</button><button disabled={busy} type="button" onClick={event => { const form = event.currentTarget.form; if (form) void saveDiary(item.id, form, true) }}>Fjern dagbokopplysninger</button></div>
-          </form>
-        </details>}
-      </li>)}</ul>}
-    </div>}
-    </div>
-    </div>
-  </section>
-}
diff --git a/src/RouteBuilder.css b/src/RouteBuilder.css
deleted file mode 100644
index d7d9a93..0000000
--- a/src/RouteBuilder.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.builder-map { height: 460px; border: 1px solid #dce1d7; border-radius: 12px; margin: 18px 0; background: #e4eadb; }
-.stop-planner { border: 1px solid #dce1d7; border-radius: 12px; margin: 20px 0; padding: 18px; }
-.stop-planner select { margin-left: 10px; font: inherit; padding: 8px; border: 1px solid #9cac9e; border-radius: 8px; }
-.stop-list { list-style: none; padding: 0; max-height: 350px; overflow: auto; }
-.stop-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #dce1d7; padding: 12px 0; }
-.stop-list li > span { flex: 1 1 220px; font-size: 12px; color: #647267; }
-.stop-details { background: #f5f6f0; padding: 16px; border-radius: 10px; }
-.stop-marker { background: #355fb8; color: white; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; font-size: 18px; }
-.stop-marker.chosen { background: #be6426; font-size: 12px; }
-.smart-roundtrip { border: 1px solid #dce1d7; border-radius: 12px; background: #f5f6f0; padding: 18px; margin: 18px 0; }
-.smart-roundtrip h4 { margin: 0; }
-.smart-roundtrip form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
-.smart-roundtrip label { display: grid; gap: 6px; }
-.smart-roundtrip input { font: inherit; padding: 10px; border: 1px solid #9cac9e; border-radius: 8px; }
-.builder-search { display: grid; gap: 8px; font-weight: 600; }
-.builder-search input,.builder-search select { font: inherit; padding: 12px; border: 1px solid #9cac9e; border-radius: 8px; min-width: 0; width: 100%; box-sizing: border-box; background: white; }
-.builder-search-form { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
-.builder-search-form label { flex: 1; min-width: 0; }
-@media(max-width:600px){.builder-search-form{flex-direction:column;align-items:stretch}}
-.builder-source-results { list-style: none; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
-.builder-source-results button { width: 100%; text-align: left; background: #edf2e9; color: #203b32; border: 2px solid transparent; }
-.builder-source-results button[aria-pressed=true] { border-color: #126b51; }
-.builder-source-results span { display: block; margin-top: 4px; font-size: 12px; }
-.builder-marker { border: 2px solid white; background: #185b45; color: white; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; cursor: grab; }
-.builder-controls { display: flex; flex-wrap: wrap; gap: 8px; }
-.builder-points { padding-left: 24px; }
-.builder-points li { margin: 8px 0; }
-.builder-points button { background: transparent; color: #185b45; padding: 5px 10px; text-decoration: underline; }
-.route-builder textarea { font: inherit; padding: 10px; border: 1px solid #9cac9e; border-radius: 8px; resize: vertical; }
-@media(max-width:600px){.builder-map{height:340px}.builder-controls button{flex:1 1 45%}}
diff --git a/src/RouteBuilder.tsx b/src/RouteBuilder.tsx
deleted file mode 100644
index 48bfddd..0000000
--- a/src/RouteBuilder.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import * as maplibregl from 'maplibre-gl'
-import type { GeoJSONSource } from 'maplibre-gl'
-import type { Geometry } from 'geojson'
-import { graphql } from './graphql'
-import { buildGpx, gpxFilename } from './gpx'
-import ElevationProfile from './ElevationProfile'
-import StopPlanner, {stopFields,type RouteStop} from './StopPlanner'
-import './RouteBuilder.css'
-
-type Point = { lon: number; lat: number }
-type Preview = { geojson: string; lengthMeters: number; waypoints: Point[] }
-type SmartPlan = { start: Point; desiredLengthMeters: number; proposalId: string }
-type Proposal = Preview & { id: string; connectorMeters: number; differenceMeters: number }
-type SavedRoute = Preview & { id: string; name: string; description: string; updatedAt: string; sourceRouteId: string | null; sourceName: string; smartPlan: string | null; stops: RouteStop[] }
-type SourceRoute = { id: string; name: string; number: string; lengthMeters: number }
-const fields = `id name description geojson lengthMeters waypoints{lon lat} updatedAt sourceRouteId sourceName smartPlan stops{${stopFields}}`
-
-export default function RouteBuilder() {
-  const token = localStorage.getItem('norwegian-explorer-session') || ''
-  const container = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<maplibregl.Map | null>(null)
-  const revision = useRef(0)
-  const [network,setNetwork] = useState('')
-  const [points,setPoints] = useState<Point[]>([])
-  const pointsRef=useRef<Point[]>([])
-  useEffect(()=>{pointsRef.current=points},[points])
-  const [preview,setPreview] = useState<Preview | null>(null)
-  const [routes,setRoutes] = useState<SavedRoute[]>([])
-  const [editing,setEditing] = useState<string | null>(null)
-  const [name,setName] = useState('')
-  const [description,setDescription] = useState('')
-  const [message,setMessage] = useState('')
-  const [busy,setBusy] = useState(false)
-  const [mapReady,setMapReady] = useState(0)
-  const [sourceId,setSourceId] = useState<string | null>(null)
-  const [sourceName,setSourceName] = useState('')
-  const [sourceChosen,setSourceChosen] = useState(false)
-  const [search,setSearch] = useState('')
-  const [matches,setMatches] = useState<SourceRoute[]>([])
-  const [networkLoading,setNetworkLoading] = useState(false)
-  const [networkAttempt,setNetworkAttempt] = useState(0)
-  const [searchAttempt,setSearchAttempt] = useState(0)
-  const [searchMessage,setSearchMessage] = useState('')
-  const [desiredKm,setDesiredKm] = useState('8')
-  const [proposals,setProposals] = useState<Proposal[]>([])
-  const [smartPlan,setSmartPlan] = useState<SmartPlan | null>(null)
-  const smartRef = useRef<SmartPlan | null>(null)
-  const [selectedStops,setSelectedStops] = useState<RouteStop[]>([])
-
-  useEffect(() => {
-    const controller=new AbortController()
-    void graphql<{myCustomRoutes:SavedRoute[]}>(`query($token:String!){myCustomRoutes(token:$token){${fields}}}`,{token},controller.signal)
-      .then(data => setRoutes(data.myCustomRoutes))
-      .catch(error => {if(!controller.signal.aborted)setMessage(error.message)})
-    return () => controller.abort()
-  },[token])
-
-  useEffect(()=>{
-    if(!sourceChosen)return
-    const controller=new AbortController()
-    void graphql<{builderNetwork:string}>('query($token:String!,$routeId:ID){builderNetwork(token:$token,routeId:$routeId)}',{token,routeId:sourceId},controller.signal)
-      .then(data=>{if(!controller.signal.aborted){setNetwork(data.builderNetwork);setNetworkLoading(false)}})
-      .catch(error=>{if(!controller.signal.aborted){setMessage(error.message);setNetworkLoading(false)}})
-    return ()=>controller.abort()
-  },[sourceId,token,sourceChosen,networkAttempt])
-
-  useEffect(()=>{
-    const controller=new AbortController()
-    const timer=setTimeout(()=>{
-      void graphql<{routes:{items:{variants:SourceRoute[]}[]}}>('query($search:String!){routes(search:$search,limit:12){items{variants{id name number lengthMeters}}}}',{search:search.trim()},controller.signal)
-        .then(data=>{if(!controller.signal.aborted){setMatches(data.routes.items.flatMap(group=>group.variants));setSearchMessage(data.routes.items.length?'Velg utgangspunkt i listen nedenfor. Søk for å finne flere ruter.':'Ingen treff. Prøv et annet rutenavn.')}})
-        .catch(error=>{if(!controller.signal.aborted)setSearchMessage(error.message)})
-    },300)
-    return ()=>{clearTimeout(timer);controller.abort()}
-  },[search,searchAttempt])
-
-  function changePoints(update: Point[] | ((old: Point[]) => Point[])) {
-    revision.current++
-    setPoints(update);setPreview(null);setMessage('');setProposals([]);setSmartPlan(null);setSelectedStops([])
-  }
-
-  useEffect(() => {
-    if(!network || !container.current) return
-    let map:maplibregl.Map
-    try {
-      const coordinates=(JSON.parse(network) as {coordinates:number[][][]}).coordinates.flat()
-      const bounds=coordinates.reduce((b,p)=>b.extend([p[0],p[1]]),new maplibregl.LngLatBounds())
-      map=new maplibregl.Map({container:container.current,bounds,fitBoundsOptions:{padding:45,maxZoom:15},style:{version:8,
-        sources:{osm:{type:'raster',tiles:['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],tileSize:256,attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}},
-        layers:[{id:'background',type:'raster',source:'osm'}]}})
-      mapRef.current=map
-      map.addControl(new maplibregl.NavigationControl())
-      map.on('load',()=>{
-        map.addSource('network',{type:'geojson',data:{type:'Feature',properties:{},geometry:JSON.parse(network)}})
-        map.addLayer({id:'network-line',type:'line',source:'network',paint:{'line-color':'#477866','line-width':3,'line-opacity':0.65}})
-        map.addSource('draft',{type:'geojson',data:{type:'FeatureCollection',features:[]}})
-        map.addLayer({id:'draft-outline',type:'line',source:'draft',paint:{'line-color':'white','line-width':9}})
-        map.addLayer({id:'draft-line',type:'line',source:'draft',paint:{'line-color':'#be6426','line-width':5}})
-        setMapReady(old=>old+1)
-      })
-      map.on('click',event=>{
-        if(pointsRef.current.length>=12)return
-        revision.current++
-        setPoints(old=>old.length>=12?old:[...old,{lon:event.lngLat.lng,lat:event.lngLat.lat}])
-        setPreview(null);setMessage('')
-        setProposals([]);setSmartPlan(null)
-        setSelectedStops([])
-      })
-    } catch {
-      // Report initialization failure from the external map library.
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setMessage('Kartet kunne ikke åpnes. Prøv en nettleser med støtte for WebGL.')
-      return
-    }
-    return ()=>{map.remove();mapRef.current=null}
-  },[network])
-
-  useEffect(()=>{
-    if(!mapReady || !mapRef.current)return
-    const map=mapRef.current
-    const source=map.getSource('draft') as GeoJSONSource
-    if(!source)return
-    source.setData(preview ? {type:'Feature',properties:{},geometry:JSON.parse(preview.geojson) as Geometry} : {type:'FeatureCollection',features:[]})
-    const markers=points.map((point,index)=>{
-      const label=document.createElement('div');label.className='builder-marker';label.textContent=String(index+1)
-      label.addEventListener('click',event=>event.stopPropagation())
-      const marker=new maplibregl.Marker({element:label,draggable:true}).setLngLat([point.lon,point.lat]).addTo(map)
-      marker.on('dragend',()=>{const pos=marker.getLngLat();revision.current++;setPoints(old=>old.map((p,i)=>i===index?{lon:pos.lng,lat:pos.lat}:p));setPreview(null);setMessage('');setProposals([]);setSmartPlan(null);setSelectedStops([])})
-      return marker
-    })
-    return ()=>markers.forEach(marker=>marker.remove())
-  },[points,preview,mapReady,network])
-
-  async function calculate() {
-    setSmartPlan(null);setProposals([]);setSelectedStops([]);setPreview(null)
-    const version=revision.current;setBusy(true);setMessage('')
-    try {
-      const data=await graphql<{previewCustomRoute:Preview}>('query($token:String!,$points:[BuilderPointInput!]!,$routeId:ID){previewCustomRoute(token:$token,points:$points,routeId:$routeId){geojson lengthMeters waypoints{lon lat}}}',{token,points,routeId:sourceId},AbortSignal.timeout(30000))
-      if(version===revision.current){setPreview(data.previewCustomRoute);setPoints(data.previewCustomRoute.waypoints)}
-    }catch(error){if(version===revision.current)setMessage(error instanceof Error?error.message:'Kunne ikke beregne ruten.')}
-    finally{setBusy(false)}
-  }
-
-  async function suggest() {
-    if(!points[0])return
-    const version=revision.current
-    const plan={start:points[0],desiredLengthMeters:Number(desiredKm)*1000,proposalId:''}
-    smartRef.current=plan
-    setBusy(true);setMessage('');setProposals([])
-    try{
-      const data=await graphql<{suggestRoundTrips:Proposal[]}>('query($token:String!,$start:BuilderPointInput!,$desiredLengthMeters:Float!,$routeId:ID){suggestRoundTrips(token:$token,start:$start,desiredLengthMeters:$desiredLengthMeters,routeId:$routeId){id geojson lengthMeters connectorMeters differenceMeters waypoints{lon lat}}}',{token,start:plan.start,desiredLengthMeters:plan.desiredLengthMeters,routeId:sourceId},AbortSignal.timeout(30000))
-      if(version===revision.current){setProposals(data.suggestRoundTrips);if(!data.suggestRoundTrips.length)setMessage('Fant ingen tilgjengelig sløyfe nær ønsket lengde fra dette startpunktet. Prøv en annen lengde, et annet startpunkt eller et større stinett.')}
-    }catch(error){if(version===revision.current)setMessage(error instanceof Error?error.message:'Kunne ikke foreslå rundturer.')}
-    finally{setBusy(false)}
-  }
-
-  function chooseProposal(proposal:Proposal){if(!smartRef.current)return;revision.current++;setPreview(proposal);setPoints(proposal.waypoints);setSelectedStops([]);setSmartPlan({...smartRef.current,proposalId:proposal.id});setMessage('Rundturen er valgt. Gi den et navn og lagre på profilen.');if(!name)setName(`Rundtur fra ${sourceName}`)}
-
-  async function save() {
-    const version=revision.current;setBusy(true);setMessage('')
-    try {
-      const data=await graphql<{saveCustomRoute:SavedRoute}>(`mutation($token:String!,$id:ID,$name:String!,$description:String!,$points:[BuilderPointInput!]!,$routeId:ID,$roundTrip:RoundTripInput,$stopIds:[ID!]){saveCustomRoute(token:$token,id:$id,name:$name,description:$description,points:$points,routeId:$routeId,roundTrip:$roundTrip,stopIds:$stopIds){${fields}}}`,{token,id:editing,name,description,points,routeId:sourceId,roundTrip:smartPlan,stopIds:selectedStops.map(stop=>stop.id)},AbortSignal.timeout(30000))
-      setRoutes(old=>[data.saveCustomRoute,...old.filter(r=>r.id!==data.saveCustomRoute.id)])
-      if(version===revision.current){setEditing(data.saveCustomRoute.id);setMessage('Ruten er lagret privat på profilen din.')}
-    }catch(error){setMessage(error instanceof Error?error.message:'Kunne ikke lagre ruten.')}
-    finally{setBusy(false)}
-  }
-
-  function open(route:SavedRoute){revision.current++;if(!sourceChosen||sourceId!==route.sourceRouteId){setNetwork('');setNetworkLoading(true)}setSourceChosen(true);setSourceId(route.sourceRouteId);setSourceName(route.sourceName);setEditing(route.id);setName(route.name);setDescription(route.description);setPoints(route.waypoints);setPreview(route);setSelectedStops(route.stops);setSmartPlan(route.smartPlan?JSON.parse(route.smartPlan):null);setProposals([]);setMessage('')}
-  function chooseSource(route:SourceRoute){if(points.length&&!window.confirm('Bytte kilderute og tømme ruteutkastet?'))return;reset();if(!sourceChosen||sourceId!==route.id){setNetwork('');setNetworkLoading(true)}setSourceChosen(true);setSourceId(route.id);setSourceName(route.name)}
-  function reset(){changePoints([]);setEditing(null);setName('');setDescription('')}
-  function downloadGpx(route: SavedRoute) {
-    try {
-      const content = buildGpx(route.name, route.description, route.geojson)
-      const url = URL.createObjectURL(new Blob([content], { type: 'application/gpx+xml;charset=utf-8' }))
-      const link = document.createElement('a')
-      link.href = url; link.download = gpxFilename(route.name)
-      document.body.appendChild(link); link.click(); link.remove()
-      window.setTimeout(() => URL.revokeObjectURL(url), 1000)
-      setMessage('GPX-filen er laget fra den lagrede ruten. Se etter filen i nettleserens nedlastinger.')
-    } catch (error) { setMessage(error instanceof Error ? error.message : 'Kunne ikke eksportere ruten.') }
-  }
-  async function remove(route:SavedRoute){
-    if(!window.confirm(`Slette «${route.name}» fra Mine ruter?`))return
-    setBusy(true)
-    try{await graphql('mutation($token:String!,$id:ID!){deleteCustomRoute(token:$token,id:$id)}',{token,id:route.id});setRoutes(old=>old.filter(r=>r.id!==route.id));if(editing===route.id)reset()}
-    catch(error){setMessage(error instanceof Error?error.message:'Kunne ikke slette ruten.')}
-    finally{setBusy(false)}
-  }
-
-  return <section className="route-builder" aria-labelledby="builder-title">
-    <h3 id="builder-title">Lag din egen rute</h3>
-    <form className="builder-search-form" onSubmit={event=>{event.preventDefault();setSearchAttempt(old=>old+1)}}><label className="builder-search">Finn et stinett eller en rute<input value={search} maxLength={120} onChange={event=>{setSearch(event.target.value);setMatches([]);setSearchMessage('Søker …')}} placeholder="Søk etter et rutenavn, for eksempel Bymarka eller Fløyen" /></label><button type="submit">Søk etter ruter</button></form>
-    {searchMessage&&<p role="status">{searchMessage}</p>}
-    {matches.length>0&&<label className="builder-search">Velg utgangspunkt<select disabled={busy} value={matches.some(route=>route.id===sourceId)?sourceId || '':''} onChange={event=>{const route=matches.find(item=>item.id===event.target.value);if(route)chooseSource(route)}}><option value="">Velg en rutevariant …</option>{matches.map(route=><option key={route.id} value={route.id}>{route.name} · {route.number} · {(route.lengthMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:1})} km</option>)}</select></label>}
-    <p><strong>{sourceChosen?`Valgt utgangspunkt: ${sourceName}`:'Ingen rute valgt ennå. Søk og velg et utgangspunkt først.'}</strong>{networkLoading?' · Henter stinett …':''}</p>
-    {sourceChosen&&!networkLoading&&!network&&<button type="button" onClick={()=>{setMessage('');setNetworkLoading(true);setNetworkAttempt(n=>n+1)}}>Prøv å hente stinettet igjen</button>}
-    <p>Klikk på stinettet for å velge start, stopp og mål. Flytt punktene ved å dra markørene. Ruten følger korteste registrerte forbindelse mellom punktene.</p>
-    <div className="builder-map" ref={container} aria-label={`Kart for rutebygging fra ${sourceName}`} />
-    <p className="stats-help">Grønt: registrerte stier. Oransje: beregnet rute. Nettet kan ha hull og mangler; ruten er et eget forslag, ikke bekreftet navigasjon. Tilbake til start kan følge samme sti.</p>
-    <section className="smart-roundtrip"><h4>Foreslå en rundtur</h4><p>Det første punktet på kartet brukes som start og mål. Du trenger bare ett punkt for å få forslag. Forslagene bruker sløyfer i det valgte stinettet; ønsket lengde er omtrentlig.</p><form onSubmit={event=>{event.preventDefault();void suggest()}}><label>Ønsket lengde (km)<input type="number" min="0.5" max="50" step="0.1" required value={desiredKm} onChange={event=>{revision.current++;setDesiredKm(event.target.value);setProposals([]);smartRef.current=null}}/></label><button disabled={busy || networkLoading || !network || !points.length}>Foreslå rundtur</button></form>
-      {proposals.length>0&&<ul className="builder-source-results">{proposals.map((proposal,index)=><li key={proposal.id}><button disabled={busy} aria-pressed={smartPlan?.proposalId===proposal.id} onClick={()=>chooseProposal(proposal)}><strong>Forslag {index+1} · {(proposal.lengthMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km</strong><span>{Math.abs(proposal.differenceMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km {proposal.differenceMeters>=0?'lengre':'kortere'} enn ønsket</span><span>{proposal.connectorMeters>1?`${(proposal.connectorMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km av turen er til og fra sløyfen langs samme sti.`:'Starter direkte på sløyfen.'}</span></button></li>)}</ul>}
-      {smartPlan&&<p>Valgt smart rundtur. Flytter du punktene eller velger «Beregn rute», går du over til manuell rutebygging.</p>}
-    </section>
-    <div className="builder-controls"><button disabled={busy || !points.length} onClick={()=>changePoints(old=>old.slice(0,-1))}>Angre siste punkt</button><button disabled={busy || points.length<2 || points.length>=12} onClick={()=>changePoints(old=>[...old,old[0]])}>Tilbake til start</button><button disabled={busy} onClick={reset}>Ny rute</button><button disabled={busy || networkLoading || !network || points.length<2} onClick={()=>void calculate()}>{busy?'Vennligst vent …':'Beregn rute'}</button></div>
-    <details className="trip-diary"><summary>Legg til punkt med koordinater</summary><form className="profile-form" onSubmit={event=>{event.preventDefault();const data=new FormData(event.currentTarget);changePoints(old=>[...old,{lat:Number(data.get('latitude')),lon:Number(data.get('longitude'))}])}}><label>Breddegrad<input name="latitude" type="number" step="any" min="-90" max="90" required placeholder="63.416" /></label><label>Lengdegrad<input name="longitude" type="number" step="any" min="-180" max="180" required placeholder="10.28" /></label><button disabled={busy || points.length>=12}>Legg til punkt</button></form></details>
-    <ol className="builder-points">{points.map((p,i)=><li key={i}><span>Punkt {i+1}: {p.lat.toFixed(5)}, {p.lon.toFixed(5)}</span><button disabled={busy} onClick={()=>changePoints(old=>old.filter((_,n)=>n!==i))}>Fjern punkt</button></li>)}</ol>
-    <p>{points.length} av 12 punkter{preview?` · ${(preview.lengthMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km`:''}</p>
-    {preview&&<ElevationProfile geojson={preview.geojson}/>} 
-    {preview&&<StopPlanner geojson={preview.geojson} selected={selectedStops} onChange={setSelectedStops} mapRef={mapRef} mapReady={mapReady}/>}
-    <form className="profile-form" onSubmit={event=>{event.preventDefault();void save()}}><label>Rutenavn<input value={name} onChange={event=>setName(event.target.value)} required maxLength={100}/></label><label>Beskrivelse<textarea value={description} onChange={event=>setDescription(event.target.value)} maxLength={2000} rows={3}/></label><button disabled={busy || networkLoading || !network || !preview} type="submit">{editing?'Lagre endringer':'Lagre på profilen'}</button></form>
-    {message&&<p role="status">{message}</p>}
-    <h3>Lagrede ruter ({routes.length})</h3>
-    {!routes.length?<p>Du har ikke laget noen egne ruter ennå.</p>:<ul className="favorite-list">{routes.map(route=><li key={route.id}><strong>{route.name}</strong><p>{(route.lengthMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:2})} km · Utgangspunkt: {route.sourceName}</p><p>{route.description}</p><div className="trip-actions"><button disabled={busy} onClick={()=>open(route)}>Åpne og rediger</button><button type="button" onClick={()=>downloadGpx(route)}>Last ned GPX</button><button disabled={busy} onClick={()=>void remove(route)}>Slett rute</button></div></li>)}</ul>}
-  </section>
-}
diff --git a/src/SiteNav.css b/src/SiteNav.css
deleted file mode 100644
index 994e677..0000000
--- a/src/SiteNav.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.site-header.site-header { box-sizing: border-box; min-height: 86px; height: auto; padding: 18px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f8faf6; border-bottom: 1px solid #e0e6dc; font-family: 'Avenir Next', system-ui, sans-serif; }
-.site-header .site-brand { display: flex; align-items: center; gap: 10px; color: #233b2d; font-size: 22px; font-weight: 750; text-decoration: none; }
-.site-header .site-brand span { font-size: 19px; }
-.site-header .site-nav { display: flex; align-items: center; gap: 28px; }
-.site-header .site-nav a { display: inline-flex; align-items: center; gap: 9px; color: #788274; font-size: 14px; font-weight: 650; text-decoration: none; padding: 12px 0; }
-.site-header .site-nav a:hover, .site-header .site-nav a[aria-current=page] { color: #233b2d; }
-.site-header .site-nav .site-profile { background: #e9efe4; color: #435e46; padding: 14px 20px; border-radius: 12px; }
-.site-header a:focus-visible { outline: 2px solid #435e46; outline-offset: 4px; }
-@media(max-width: 800px) { .site-header.site-header { flex-wrap: wrap; padding: 16px 20px; gap: 12px; } .site-header .site-nav { width: 100%; gap: 18px; flex-wrap: wrap; } .site-header .site-nav a { font-size: 12px; } .site-header .site-nav .site-profile { padding: 10px 12px; } }
-
-.site-profile-menu { position: relative; }
-.site-header .site-profile-menu > button { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 14px; font-weight: 650; border: 0; cursor: pointer; }
-.site-dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; min-width: 225px; padding: 8px; background: #fff; border: 1px solid #e0e6dc; border-radius: 12px; box-shadow: 0 10px 35px #233b2d20; }
-.site-header .site-dropdown a { display: flex; padding: 11px 14px; border-radius: 7px; color: #233b2d; }
-.site-header .site-dropdown a:hover { background: #edf2e9; }
-.site-header button:focus-visible { outline: 2px solid #435e46; outline-offset: 4px; }
-
-.site-header .site-dropdown .site-logout { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border: 0; border-top: 1px solid #e0e6dc; border-radius: 0 0 7px 7px; background: transparent; color: #923c35; text-align: left; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
-.site-header .site-dropdown .site-logout:hover { background: #f9efec; }
-.site-header .site-dropdown .site-logout:disabled { opacity: .6; cursor: wait; }
-.site-logout-error { margin: 8px 14px; font-size: 12px; color: #923c35; }
diff --git a/src/SiteNav.tsx b/src/SiteNav.tsx
deleted file mode 100644
index 12ae389..0000000
--- a/src/SiteNav.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { graphql, TOKEN_KEY } from './graphql'
-import { useEffect, useRef, useState } from 'react'
-import './SiteNav.css'
-
-type Props = { active?: 'home' | 'explore' | 'mountains' | 'profile'; authenticated: boolean; onHome?: () => void; onExplore?: () => void; onProfile?: () => void }
-export default function SiteNav({ active, authenticated, onHome, onExplore, onProfile }: Props) {
-  const [open, setOpen] = useState(false)
-  const [loggingOut, setLoggingOut] = useState(false)
-  const [logoutError, setLogoutError] = useState('')
-  const menuRef = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    if (!open) return
-    const close = (event: PointerEvent) => { if (!menuRef.current?.contains(event.target as Node)) setOpen(false) }
-    const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') { setOpen(false); menuRef.current?.querySelector('button')?.focus() } }
-    document.addEventListener('pointerdown', close)
-    document.addEventListener('keydown', escape)
-    return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', escape) }
-  }, [open])
-  const base = import.meta.env.BASE_URL
-  async function logout() {
-    setLoggingOut(true); setLogoutError('')
-    const token = localStorage.getItem(TOKEN_KEY)
-    try {
-      if (token) await graphql('mutation($token:String!){logout(token:$token)}', {token}, AbortSignal.timeout(10000))
-      localStorage.removeItem(TOKEN_KEY)
-      window.location.assign(base)
-    } catch { setLogoutError('Kunne ikke logge ut. Prøv igjen.'); setLoggingOut(false) }
-  }
-  return <header className="site-header"><a className="site-brand" href={base} onClick={onHome ? event => { event.preventDefault(); onHome() } : undefined}>△ <span>Norwegian Explorer</span></a><nav className="site-nav" aria-label="Hovedmeny">
-    <a href={base} aria-current={active === 'home' ? 'page' : undefined} onClick={onHome ? event => { event.preventDefault(); onHome() } : undefined}>Forside</a>
-    <a href={`${base}#explore`} aria-current={active === 'explore' ? 'page' : undefined} onClick={onExplore ? event => { event.preventDefault(); onExplore() } : undefined}>Utforsk turer</a>
-    <a href={`${base}fjellomrade.html`} aria-current={active === 'mountains' ? 'page' : undefined}>Fjellområder</a>
-    {authenticated ? <div className="site-profile-menu" ref={menuRef} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false) }}>
-      <button type="button" className="site-profile" aria-expanded={open} aria-controls="profile-shortcuts" onClick={()=>setOpen(!open)}><span aria-hidden="true">◉</span> Min profil <span aria-hidden="true">⌄</span></button>
-      {open && <div id="profile-shortcuts" className="site-dropdown" aria-label="Profilvalg">{([['overview','Oversikt'],['favorites','Favoritter'],['trips','Mine turer'],['settings','Innstillinger']] as const).map(([tab,label]) => <a key={label} href={`${base}#profile/${tab}`} onClick={onProfile ? event => { event.preventDefault(); onProfile(); window.location.hash=`profile/${tab}`; window.dispatchEvent(new HashChangeEvent('hashchange')); setOpen(false) } : undefined}>{label}</a>)}<button type="button" className="site-logout" disabled={loggingOut} onClick={()=>void logout()}>{loggingOut?'Logger ut …':'Logg ut'}</button>{logoutError&&<p className="site-logout-error" role="alert">{logoutError}</p>}</div>}
-    </div> : <a className="site-profile" href={`${base}#profile`} onClick={onProfile ? event => { event.preventDefault(); onProfile() } : undefined}>Logg inn</a>}
-
-  </nav></header>
-}
diff --git a/src/StopPlanner.tsx b/src/StopPlanner.tsx
deleted file mode 100644
index 1700cfd..0000000
--- a/src/StopPlanner.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {useEffect,useState,type RefObject} from 'react'
-import * as maplibregl from 'maplibre-gl'
-import {graphql} from './graphql'
-
-export type RouteStop={id:string;name:string|null;kind:string;lon:number;lat:number;distanceFromRouteMeters:number;distanceFromStartMeters:number;operator:string|null;openingHours:string|null;capacity:string|null;fee:string|null;website:string|null}
-export const stopFields='id name kind lon lat distanceFromRouteMeters distanceFromStartMeters operator openingHours capacity fee website'
-const categories:Record<string,string>={alpine_hut:'Turhytte',wilderness_hut:'Villmarkshytte',chalet:'Hytte',shelter:'Gapahuk / leskur',lean_to:'Gapahuk',viewpoint:'Utsiktspunkt',picnic_site:'Rasteplass',toilets:'Toalett',drinking_water:'Drikkevann',parking:'Parkering',camp_site:'Campingplass',peak:'Topp'}
-
-export default function StopPlanner({geojson,selected,onChange,mapRef,mapReady}:{geojson:string;selected:RouteStop[];onChange:(stops:RouteStop[])=>void;mapRef:RefObject<maplibregl.Map|null>;mapReady:number}){
-  const [result,setResult]=useState<{geojson:string;stops:RouteStop[];truncated:boolean}|null>(null)
-  const [error,setError]=useState<{geojson:string;text:string}|null>(null)
-  const [kind,setKind]=useState('all')
-  const [focused,setFocused]=useState<string|null>(null)
-  const [attempt,setAttempt]=useState(0)
-  const token=localStorage.getItem('norwegian-explorer-session')||''
-  useEffect(()=>{
-    const controller=new AbortController()
-    void graphql<{routeStops:{stops:RouteStop[];truncated:boolean}}>(`query($token:String!,$geojson:String!){routeStops(token:$token,geojson:$geojson){truncated stops{${stopFields}}}}`,{token,geojson},AbortSignal.any([controller.signal,AbortSignal.timeout(20000)]))
-      .then(data=>{if(!controller.signal.aborted)setResult({geojson,...data.routeStops})})
-      .catch(err=>{if(!controller.signal.aborted)setError({geojson,text:err.message})})
-    return ()=>controller.abort()
-  },[geojson,token,attempt])
-  const loaded=result?.geojson===geojson
-  const stops=loaded?result.stops:[]
-  const visible=kind==='all'?stops:stops.filter(stop=>stop.kind===kind)
-  const selectedIds=new Set(selected.map(stop=>stop.id))
-  const current=stops.find(stop=>stop.id===focused)||selected.find(stop=>stop.id===focused)
-
-  useEffect(()=>{
-    const map=mapRef.current
-    if(!map||!mapReady||!loaded)return
-    const popups:maplibregl.Popup[]=[]
-    const markers=(kind==='all'?result.stops:result.stops.filter(stop=>stop.kind===kind)).map(stop=>{
-      const element=document.createElement('button');element.type='button';element.className=`stop-marker${selected.some(s=>s.id===stop.id)?' chosen':''}`;element.textContent=String(selected.findIndex(s=>s.id===stop.id)+1||'•');element.setAttribute('aria-label',`${stop.name||categories[stop.kind]} – vis stopp`)
-      element.addEventListener('click',event=>{event.stopPropagation();setFocused(stop.id);const content=document.createElement('div');content.textContent=`${stop.name||categories[stop.kind]} · ${Math.round(stop.distanceFromRouteMeters)} m fra ruten`;popups.push(new maplibregl.Popup().setLngLat([stop.lon,stop.lat]).setDOMContent(content).addTo(map))})
-      return new maplibregl.Marker({element}).setLngLat([stop.lon,stop.lat]).addTo(map)
-    })
-    return ()=>{markers.forEach(marker=>marker.remove());popups.forEach(popup=>popup.remove())}
-  },[mapRef,mapReady,result,loaded,kind,selected])
-
-  function toggle(stop:RouteStop){onChange((selectedIds.has(stop.id)?selected.filter(s=>s.id!==stop.id):[...selected,stop]).sort((a,b)=>a.distanceFromStartMeters-b.distanceFromStartMeters))}
-  return <section className="stop-planner" aria-labelledby="stops-heading"><h4 id="stops-heading">Stopp langs turen</h4>
-    <p>Steder innen 500 meter fra ruten. Avstanden er i luftlinje til kartlinjen; stedet er ikke bekreftet tilgjengelig fra stien. Et stopp endrer ikke ruten eller lengden.</p>
-    <label>Kategori<select value={kind} onChange={event=>setKind(event.target.value)}><option value="all">Alle steder</option>{Object.entries(categories).map(([key,label])=><option key={key} value={key}>{label}</option>)}</select></label>
-    {error?.geojson===geojson?<p role="alert">{error.text} <button type="button" onClick={()=>{setError(null);setAttempt(n=>n+1)}}>Prøv igjen</button></p>:!loaded?<p role="status">Henter steder fra lokale OSM-data …</p>:<p role="status">{visible.length} steder i denne kategorien{result.truncated?' · Utvalget er begrenset til de 200 nærmeste stedene.':''}</p>}
-    {loaded&&!visible.length&&<p>Ingen registrerte steder i denne kategorien nær ruten.</p>}
-    <ul className="stop-list">{visible.map(stop=><li key={stop.id}><button className="text-button" onClick={()=>{setFocused(stop.id);mapRef.current?.easeTo({center:[stop.lon,stop.lat],zoom:Math.max(mapRef.current.getZoom(),13)})}}>{stop.name||categories[stop.kind]}</button><span>{categories[stop.kind]} · {Math.round(stop.distanceFromRouteMeters)} m fra ruten · cirka {(stop.distanceFromStartMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:1})} km fra start</span><button disabled={!selectedIds.has(stop.id)&&selected.length>=20} aria-pressed={selectedIds.has(stop.id)} onClick={()=>toggle(stop)}>{selectedIds.has(stop.id)?'Fjern stopp':'Legg til stopp'}</button></li>)}</ul>
-    {current&&<div className="stop-details"><h4>{current.name||categories[current.kind]}</h4><p>{categories[current.kind]}</p><dl>{current.operator&&<div><dt>Operatør</dt><dd>{current.operator}</dd></div>}{current.openingHours&&<div><dt>Registrerte åpningstider</dt><dd>{current.openingHours}</dd></div>}{current.capacity&&<div><dt>Registrert kapasitet</dt><dd>{current.capacity}</dd></div>}{current.fee&&<div><dt>Registrert avgift</dt><dd>{current.fee}</dd></div>}</dl><p><a href={`https://www.openstreetmap.org/${current.id.startsWith('n/')?'node':'way'}/${current.id.split('/')[1]}`} target="_blank" rel="noreferrer">Se stedet på OpenStreetMap</a>{current.website&&<> · <a href={current.website} target="_blank" rel="noreferrer">Stedets nettside</a></>}</p><p>Opplysningene kan være mangelfulle eller utdaterte. Kontroller åpning, adgang og eventuell bestilling før turen.</p></div>}
-    <h4>Planlagte stopp ({selected.length}/20)</h4>
-    {!selected.length?<p>Velg stopp fra listen eller se opplysninger ved å trykke på kartmarkørene.</p>:<ol>{selected.map(stop=><li key={stop.id}>{stop.name||categories[stop.kind]} · cirka {(stop.distanceFromStartMeters/1000).toLocaleString('nb-NO',{maximumFractionDigits:1})} km fra start <button className="text-button" onClick={()=>onChange(selected.filter(s=>s.id!==stop.id))}>Fjern</button></li>)}</ol>}
-    <p className="stats-help">Lagres når du trykker «Lagre på profilen» eller «Lagre endringer». Rekkefølgen viser omtrentlig første passering langs kartlinjen. © OpenStreetMap-bidragsytere, ODbL.</p>
-  </section>
-}
diff --git a/src/assets/hero.png b/src/assets/hero.png
deleted file mode 100644
index 02251f4..0000000
Binary files a/src/assets/hero.png and /dev/null differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
deleted file mode 100644
index 5101b67..0000000
--- a/src/assets/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
new file mode 100644
index 0000000..2e08457
--- /dev/null
+++ b/src/components/PasswordInput.tsx
@@ -0,0 +1,35 @@
+import { useState, type ComponentProps } from 'react'
+
+/** Passordfelt med knapp som viser eller skjuler passordet */
+export default function PasswordInput(props: Omit<ComponentProps<'input'>, 'type'>) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <span className="password-field">
+      <input {...props} type={visible ? 'text' : 'password'} />
+      <button
+        type="button"
+        className="password-toggle"
+        aria-label={visible ? 'Skjul passord' : 'Vis passord'}
+        aria-pressed={visible}
+        aria-controls={props.id}
+        onClick={() => setVisible(!visible)}
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" />
+          <circle cx="12" cy="12" r="3" />
+          {visible && <path d="m3 3 18 18" />}
+        </svg>
+      </button>
+    </span>
+  )
+}
diff --git a/src/components/SiteNav/SiteNav.css b/src/components/SiteNav/SiteNav.css
new file mode 100644
index 0000000..d417841
--- /dev/null
+++ b/src/components/SiteNav/SiteNav.css
@@ -0,0 +1,140 @@
+.site-header.site-header {
+  box-sizing: border-box;
+  min-height: 86px;
+  height: auto;
+  padding: 18px 5%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  background: #f8faf6;
+  border-bottom: 1px solid #e0e6dc;
+  font-family: 'Avenir Next', system-ui, sans-serif;
+}
+.site-header .site-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #233b2d;
+  font-size: 22px;
+  font-weight: 750;
+  text-decoration: none;
+}
+.site-header .site-brand span {
+  font-size: 19px;
+}
+.site-header .site-nav {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+.site-header .site-nav a {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  color: #788274;
+  font-size: 14px;
+  font-weight: 650;
+  text-decoration: none;
+  padding: 12px 0;
+}
+.site-header .site-nav a:hover,
+.site-header .site-nav a[aria-current='page'] {
+  color: #233b2d;
+}
+.site-header .site-nav .site-profile {
+  background: #e9efe4;
+  color: #435e46;
+  padding: 14px 20px;
+  border-radius: 12px;
+}
+.site-header a:focus-visible {
+  outline: 2px solid #435e46;
+  outline-offset: 4px;
+}
+@media (max-width: 800px) {
+  .site-header.site-header {
+    flex-wrap: wrap;
+    padding: 16px 20px;
+    gap: 12px;
+  }
+  .site-header .site-nav {
+    width: 100%;
+    gap: 18px;
+    flex-wrap: wrap;
+  }
+  .site-header .site-nav a {
+    font-size: 12px;
+  }
+  .site-header .site-nav .site-profile {
+    padding: 10px 12px;
+  }
+}
+
+.site-profile-menu {
+  position: relative;
+}
+.site-header .site-profile-menu > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 650;
+  border: 0;
+  cursor: pointer;
+}
+.site-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  z-index: 100;
+  min-width: 225px;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #e0e6dc;
+  border-radius: 12px;
+  box-shadow: 0 10px 35px #233b2d20;
+}
+.site-header .site-dropdown a {
+  display: flex;
+  padding: 11px 14px;
+  border-radius: 7px;
+  color: #233b2d;
+}
+.site-header .site-dropdown a:hover {
+  background: #edf2e9;
+}
+.site-header button:focus-visible {
+  outline: 2px solid #435e46;
+  outline-offset: 4px;
+}
+
+.site-header .site-dropdown .site-logout {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 11px 14px;
+  border: 0;
+  border-top: 1px solid #e0e6dc;
+  border-radius: 0 0 7px 7px;
+  background: transparent;
+  color: #923c35;
+  text-align: left;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 650;
+  cursor: pointer;
+}
+.site-header .site-dropdown .site-logout:hover {
+  background: #f9efec;
+}
+.site-header .site-dropdown .site-logout:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+.site-logout-error {
+  margin: 8px 14px;
+  font-size: 12px;
+  color: #923c35;
+}
diff --git a/src/components/SiteNav/SiteNav.tsx b/src/components/SiteNav/SiteNav.tsx
new file mode 100644
index 0000000..7eeb8ab
--- /dev/null
+++ b/src/components/SiteNav/SiteNav.tsx
@@ -0,0 +1,185 @@
+import { graphql, TOKEN_KEY } from '../../lib/graphql'
+import { useEffect, useRef, useState } from 'react'
+import './SiteNav.css'
+
+type Props = {
+  active?: 'home' | 'explore' | 'mountains' | 'profile'
+  authenticated: boolean
+  onHome?: () => void
+  onExplore?: () => void
+  onProfile?: () => void
+}
+export default function SiteNav({ active, authenticated, onHome, onExplore, onProfile }: Props) {
+  const [open, setOpen] = useState(false)
+  const [loggingOut, setLoggingOut] = useState(false)
+  const [logoutError, setLogoutError] = useState('')
+  const menuRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const close = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        menuRef.current?.querySelector('button')?.focus()
+      }
+    }
+    document.addEventListener('pointerdown', close)
+    document.addEventListener('keydown', escape)
+    return () => {
+      document.removeEventListener('pointerdown', close)
+      document.removeEventListener('keydown', escape)
+    }
+  }, [open])
+  const base = import.meta.env.BASE_URL
+  async function logout() {
+    setLoggingOut(true)
+    setLogoutError('')
+    const token = localStorage.getItem(TOKEN_KEY)
+    try {
+      if (token)
+        await graphql(
+          'mutation($token:String!){logout(token:$token)}',
+          { token },
+          AbortSignal.timeout(10000),
+        )
+      localStorage.removeItem(TOKEN_KEY)
+      window.location.assign(base)
+    } catch {
+      setLogoutError('Kunne ikke logge ut. Prøv igjen.')
+      setLoggingOut(false)
+    }
+  }
+  return (
+    <header className="site-header">
+      <a
+        className="site-brand"
+        href={base}
+        onClick={
+          onHome
+            ? (event) => {
+                event.preventDefault()
+                onHome()
+              }
+            : undefined
+        }
+      >
+        △ <span>Norwegian Explorer</span>
+      </a>
+      <nav className="site-nav" aria-label="Hovedmeny">
+        <a
+          href={base}
+          aria-current={active === 'home' ? 'page' : undefined}
+          onClick={
+            onHome
+              ? (event) => {
+                  event.preventDefault()
+                  onHome()
+                }
+              : undefined
+          }
+        >
+          Forside
+        </a>
+        <a
+          href={`${base}#explore`}
+          aria-current={active === 'explore' ? 'page' : undefined}
+          onClick={
+            onExplore
+              ? (event) => {
+                  event.preventDefault()
+                  onExplore()
+                }
+              : undefined
+          }
+        >
+          Utforsk turer
+        </a>
+        <a
+          href={`${base}fjellomrade.html`}
+          aria-current={active === 'mountains' ? 'page' : undefined}
+        >
+          Fjellområder
+        </a>
+        {authenticated ? (
+          <div
+            className="site-profile-menu"
+            ref={menuRef}
+            onBlur={(event) => {
+              if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false)
+            }}
+          >
+            <button
+              type="button"
+              className="site-profile"
+              aria-expanded={open}
+              aria-controls="profile-shortcuts"
+              onClick={() => setOpen(!open)}
+            >
+              <span aria-hidden="true">◉</span> Min profil <span aria-hidden="true">⌄</span>
+            </button>
+            {open && (
+              <div id="profile-shortcuts" className="site-dropdown" aria-label="Profilvalg">
+                {(
+                  [
+                    ['overview', 'Oversikt'],
+                    ['favorites', 'Favoritter'],
+                    ['trips', 'Mine turer'],
+                    ['settings', 'Innstillinger'],
+                  ] as const
+                ).map(([tab, label]) => (
+                  <a
+                    key={label}
+                    href={`${base}#profile/${tab}`}
+                    onClick={
+                      onProfile
+                        ? (event) => {
+                            event.preventDefault()
+                            onProfile()
+                            window.location.hash = `profile/${tab}`
+                            window.dispatchEvent(new HashChangeEvent('hashchange'))
+                            setOpen(false)
+                          }
+                        : undefined
+                    }
+                  >
+                    {label}
+                  </a>
+                ))}
+                <button
+                  type="button"
+                  className="site-logout"
+                  disabled={loggingOut}
+                  onClick={() => void logout()}
+                >
+                  {loggingOut ? 'Logger ut …' : 'Logg ut'}
+                </button>
+                {logoutError && (
+                  <p className="site-logout-error" role="alert">
+                    {logoutError}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <a
+            className="site-profile"
+            href={`${base}#profile`}
+            onClick={
+              onProfile
+                ? (event) => {
+                    event.preventDefault()
+                    onProfile()
+                  }
+                : undefined
+            }
+          >
+            Logg inn
+          </a>
+        )}
+      </nav>
+    </header>
+  )
+}
diff --git a/src/components/SkipLink/SkipLink.css b/src/components/SkipLink/SkipLink.css
new file mode 100644
index 0000000..207621a
--- /dev/null
+++ b/src/components/SkipLink/SkipLink.css
@@ -0,0 +1,12 @@
+/* Lenken er skjult utenfor skjermen til den får tastaturfokus */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 10px;
+  padding: 10px;
+  background: white;
+  z-index: 10;
+}
+.skip-link:focus {
+  top: 10px;
+}
diff --git a/src/components/SkipLink/SkipLink.tsx b/src/components/SkipLink/SkipLink.tsx
new file mode 100644
index 0000000..73b856d
--- /dev/null
+++ b/src/components/SkipLink/SkipLink.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import './SkipLink.css'
+
+/**
+ * «Hopp til innhold»-lenke for tastatur- og skjermleserbrukere. Peker på elementet med id="main",
+ * så hver side må ha en <main id="main">.
+ */
+export default function SkipLink({ children = 'Hopp til hovedinnhold' }: { children?: ReactNode }) {
+  return (
+    <a className="skip-link" href="#main">
+      {children}
+    </a>
+  )
+}
diff --git a/src/features/ElevationProfile/ElevationProfile.css b/src/features/ElevationProfile/ElevationProfile.css
new file mode 100644
index 0000000..d097f3a
--- /dev/null
+++ b/src/features/ElevationProfile/ElevationProfile.css
@@ -0,0 +1,63 @@
+.elevation-panel {
+  margin: 24px 0;
+  padding: 20px;
+  background: #fff;
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+}
+.elevation-panel h3 {
+  margin-top: 0;
+}
+.elevation-panel svg {
+  display: block;
+  width: 100%;
+  max-width: 900px;
+  margin: 20px 0;
+}
+.elevation-panel svg text {
+  fill: #647267;
+  font-size: 11px;
+}
+.elevation-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 18px;
+}
+.elevation-stats strong,
+.elevation-stats span {
+  display: block;
+}
+.elevation-stats span {
+  color: #647267;
+  font-size: 12px;
+  margin-top: 6px;
+}
+.elevation-slider {
+  display: grid;
+  gap: 8px;
+  font-size: 13px;
+}
+.elevation-slider input {
+  width: 100%;
+  accent-color: #126b51;
+}
+.elevation-table {
+  overflow: auto;
+  max-height: 300px;
+}
+.elevation-table table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.elevation-table td,
+.elevation-table th {
+  text-align: left;
+  padding: 8px;
+  border-bottom: 1px solid #dce1d7;
+}
+@media (max-width: 600px) {
+  .elevation-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/features/ElevationProfile/ElevationProfile.tsx b/src/features/ElevationProfile/ElevationProfile.tsx
new file mode 100644
index 0000000..46e21a5
--- /dev/null
+++ b/src/features/ElevationProfile/ElevationProfile.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useRef, useState } from 'react'
+import { graphql, TOKEN_KEY } from '../../lib/graphql'
+import './ElevationProfile.css'
+import { formatKm } from '../../lib/format'
+
+type Point = { distanceMeters: number; elevation: number | null }
+type Profile = {
+  points: Point[]
+  lengthMeters: number
+  sampleIntervalMeters: number
+  ascentMeters: number | null
+  descentMeters: number | null
+  minElevation: number | null
+  maxElevation: number | null
+  complete: boolean
+  missingCount: number
+  source: string
+}
+function meters(value: number | null) {
+  return value == null ? 'Ikke tilgjengelig' : `${Math.round(value).toLocaleString('nb-NO')} m`
+}
+
+export default function ElevationProfile({ geojson }: { geojson: string }) {
+  const [result, setResult] = useState<{ geojson: string; profile: Profile } | null>(null)
+  const [error, setError] = useState<{ geojson: string; text: string } | null>(null)
+  const [busyGeo, setBusyGeo] = useState<string | null>(null)
+  const [selected, setSelected] = useState(0)
+  const request = useRef<AbortController | null>(null)
+  useEffect(() => () => request.current?.abort(), [geojson])
+  const profile = result?.geojson === geojson ? result.profile : null
+  const busy = busyGeo === geojson
+  let connected = false
+  try {
+    connected = JSON.parse(geojson).type === 'LineString'
+  } catch {
+    /* A malformed route cannot have a profile. */
+  }
+
+  async function load() {
+    request.current?.abort()
+    const controller = new AbortController()
+    request.current = controller
+    const token = localStorage.getItem(TOKEN_KEY) || ''
+    setBusyGeo(geojson)
+    setError(null)
+    try {
+      const data = await graphql<{ elevationProfile: Profile }>(
+        'query($token:String!,$geojson:String!){elevationProfile(token:$token,geojson:$geojson){points{distanceMeters elevation} lengthMeters sampleIntervalMeters ascentMeters descentMeters minElevation maxElevation complete missingCount source}}',
+        { token, geojson },
+        AbortSignal.any([controller.signal, AbortSignal.timeout(25000)]),
+      )
+      if (!controller.signal.aborted) {
+        setResult({ geojson, profile: data.elevationProfile })
+        setSelected(0)
+      }
+    } catch (err) {
+      if (!controller.signal.aborted)
+        setError({
+          geojson,
+          text: err instanceof Error ? err.message : 'Kunne ikke hente høydeprofil.',
+        })
+    } finally {
+      if (request.current === controller) setBusyGeo(null)
+    }
+  }
+  const low = (profile?.minElevation ?? 0) - 5,
+    high = (profile?.maxElevation ?? 0) + 5
+  const x = (distance: number) => 48 + (distance / (profile?.lengthMeters || 1)) * 564
+  const y = (elevation: number) => 176 - ((elevation - low) / (high - low)) * 144
+  let path = '',
+    pen = false
+  if (profile)
+    for (const point of profile.points) {
+      if (point.elevation == null) {
+        pen = false
+        continue
+      }
+      path += `${pen ? 'L' : 'M'}${x(point.distanceMeters).toFixed(2)},${y(point.elevation).toFixed(2)} `
+      pen = true
+    }
+  const point = profile?.points[Math.min(selected, (profile?.points.length || 1) - 1)]
+  return (
+    <section className="elevation-panel" aria-label="Høydeprofil">
+      <h3>Høydeprofil</h3>
+      {!connected ? (
+        <p>
+          Velg en sammenhengende rute eller rutevariant for å vise høydeprofil. Flere adskilte
+          kartlinjer har ingen entydig turrekkefølge.
+        </p>
+      ) : (
+        <>
+          <p>
+            Høydene hentes fra Kartverket når du trykker på knappen. Utvalgte rutekoordinater sendes
+            til tjenesten.
+          </p>
+          <button disabled={busy} onClick={() => void load()}>
+            {busy ? 'Henter høyder …' : profile ? 'Oppdater høydeprofil' : 'Hent høydeprofil'}
+          </button>
+          {busy && <p role="status">Henter terrenghøyder langs ruten …</p>}
+          {error?.geojson === geojson && <p role="alert">{error.text}</p>}
+          {profile && (
+            <>
+              <div className="elevation-stats">
+                <div>
+                  <strong>{meters(profile.ascentMeters)}</strong>
+                  <span>Opp</span>
+                </div>
+                <div>
+                  <strong>{meters(profile.descentMeters)}</strong>
+                  <span>Ned</span>
+                </div>
+                <div>
+                  <strong>{meters(profile.minElevation)}</strong>
+                  <span>Laveste målte punkt</span>
+                </div>
+                <div>
+                  <strong>{meters(profile.maxElevation)}</strong>
+                  <span>Høyeste målte punkt</span>
+                </div>
+              </div>
+              <svg
+                viewBox="0 0 640 220"
+                role="img"
+                aria-label={`Høydekurve langs ${(profile.lengthMeters / 1000).toFixed(1)} kilometer rute`}
+              >
+                <line x1="48" y1="176" x2="612" y2="176" stroke="#9cac9e" />
+                <line x1="48" y1="32" x2="48" y2="176" stroke="#9cac9e" />
+                <text x="6" y="32">
+                  {Math.round(high)} m
+                </text>
+                <text x="6" y="176">
+                  {Math.round(low)} m
+                </text>
+                <text x="48" y="204">
+                  0 km
+                </text>
+                <text x="612" y="204" textAnchor="end">
+                  {formatKm(profile.lengthMeters, 1)} km
+                </text>
+                <path d={path} fill="none" stroke="#126b51" strokeWidth="3" />
+                {point?.elevation != null && (
+                  <circle
+                    cx={x(point.distanceMeters)}
+                    cy={y(point.elevation)}
+                    r="5"
+                    fill="#be6426"
+                  />
+                )}
+              </svg>
+              <label className="elevation-slider">
+                Utforsk høydekurven
+                <input
+                  type="range"
+                  min="0"
+                  max={profile.points.length - 1}
+                  value={Math.min(selected, profile.points.length - 1)}
+                  onChange={(event) => setSelected(Number(event.target.value))}
+                />
+              </label>
+              {point && (
+                <p>
+                  {formatKm(point.distanceMeters, 2)} km fra start · {meters(point.elevation)} over
+                  havet
+                </p>
+              )}
+              {!profile.complete && (
+                <p role="status">
+                  Høyde mangler for {profile.missingCount} punkter. Kurven har hull, og samlet
+                  opp/ned vises ikke.
+                </p>
+              )}
+              <p className="stats-help">
+                Omtrentlige terrenghøyder med cirka {Math.round(profile.sampleIntervalMeters)} meter
+                mellom målepunktene. Stigning og høyeste/laveste punkt er estimater fra utvalget og
+                kan overse korte bakker.{' '}
+                <a href="https://ws.geonorge.no/hoydedata/v1/" target="_blank" rel="noreferrer">
+                  Kilde: {profile.source}
+                </a>
+                .
+              </p>
+              <details>
+                <summary>Høydene som tabell</summary>
+                <div className="elevation-table">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>Fra start (km)</th>
+                        <th>Høyde (m)</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {profile.points.map((p, i) => (
+                        <tr key={i}>
+                          <td>{formatKm(p.distanceMeters, 2)}</td>
+                          <td>{p.elevation == null ? 'Mangler' : Math.round(p.elevation)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </details>
+            </>
+          )}
+        </>
+      )}
+    </section>
+  )
+}
diff --git a/src/features/Explore/Explore.css b/src/features/Explore/Explore.css
new file mode 100644
index 0000000..51c899c
--- /dev/null
+++ b/src/features/Explore/Explore.css
@@ -0,0 +1,164 @@
+.explore-app,
+.auth-page {
+  --ink: #23382c;
+  --muted: #758075;
+  --green: #435d47;
+  --line: #e3e8df;
+  --paper: #fafbf8;
+  font-family: 'Avenir Next', system-ui, sans-serif;
+  color: var(--ink);
+  background: var(--paper);
+}
+.explore-app [hidden] {
+  display: none !important;
+}
+.explore-app > header,
+.auth-page > header {
+  height: 86px;
+  padding: 0 max(5%, calc((100vw - 1320px) / 2));
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+}
+
+.explore-app button,
+.auth-page button {
+  background: var(--green);
+  border-radius: 9px;
+  font-weight: 600;
+  padding: 12px 18px;
+  transition:
+    background 0.15s,
+    transform 0.15s;
+}
+.explore-app button:hover:not(:disabled),
+.auth-page button:hover:not(:disabled) {
+  background: #304c37;
+}
+
+.explore-app main {
+  max-width: 1432px;
+  padding: 24px 56px 24px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.explore-app .text-button {
+  background: transparent;
+  color: var(--green);
+}
+.explore-app .text-button:hover:not(:disabled) {
+  background: transparent;
+  color: #263c2b;
+}
+.profile-page-title {
+  margin: 32px 0;
+}
+.profile-page-title h1 {
+  font-size: 44px;
+  letter-spacing: -1.6px;
+}
+.profile-page-title > p:last-child {
+  color: var(--muted);
+  font-size: 14px;
+}
+.explore-app .profile-panel {
+  margin-top: 24px;
+  border-radius: 12px;
+  padding: 30px;
+}
+.explore-app .profile-tabs button {
+  background: #eef2ea;
+  color: var(--ink);
+}
+.auth-page {
+  background: #f4f6ef;
+}
+.auth-main {
+  padding: 48px 24px;
+}
+.auth-card {
+  border-radius: 14px;
+  box-shadow: 0 16px 45px #243a3010;
+  padding: 42px;
+}
+.auth-intro h1 {
+  font-family: 'Avenir Next', system-ui, sans-serif;
+  font-size: 44px;
+  font-weight: 600;
+  letter-spacing: -1.8px;
+}
+.auth-card .profile-form input {
+  background: #fafbf8;
+  border-color: #dce3d5;
+  padding: 14px;
+}
+.auth-card .text-button {
+  background: transparent;
+  color: var(--green);
+}
+@media (max-width: 1050px) {
+  .explore-app main {
+    padding: 20px 28px;
+  }
+}
+@media (max-width: 720px) {
+  .explore-app > header,
+  .auth-page > header {
+    padding: 0 20px;
+    height: 74px;
+  }
+  .explore-app main {
+    padding: 16px;
+  }
+  .auth-card {
+    padding: 28px;
+  }
+  .explore-app .profile-panel {
+    padding: 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .explore-app button {
+    transition: none;
+  }
+}
+/* Give closed native selects the same appearance across browsers. */
+.explore-app select {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  max-width: 100%;
+  min-height: 46px;
+  padding: 12px 42px 12px 14px !important;
+  border: 1px solid #d9e1d3 !important;
+  border-radius: 9px !important;
+  background-color: #fff !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23566b50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 14px center !important;
+  color: #293e2e !important;
+  font-family: inherit;
+  font-size: 13px !important;
+  line-height: 1.4;
+  box-shadow: none;
+  cursor: pointer;
+}
+.explore-app select:hover {
+  border-color: #9bad91 !important;
+}
+.explore-app select:focus-visible {
+  outline: 2px solid #677f5d;
+  outline-offset: 3px;
+}
+.explore-app select:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
diff --git a/src/Explore/Explore.tsx b/src/features/Explore/Explore.tsx
similarity index 58%
rename from src/Explore/Explore.tsx
rename to src/features/Explore/Explore.tsx
index 36a8b46..46c6f90 100644
--- a/src/Explore/Explore.tsx
+++ b/src/features/Explore/Explore.tsx
@@ -6,22 +6,39 @@
 import { useEffect, useState } from 'react'
 import './Explore.css'
 import ExploreMap, { type MapFocus } from './ExploreMap'
-import ExploreSearchPanel, { type PlaceHit } from './ExploreSearchPanel'
+import ExploreSearchPanel from './ExploreSearchPanel'
+import { ROUTE_GROUP_FIELDS, type PlaceHit } from '../../lib/routeSearch'
 import ExploreFilters from './ExploreFilters'
-import { EMPTY_FILTERS, PAGE_SIZE, filterVariables, type Bounds, type Route, type RouteFilterValue, type RouteGroup, type RouteSort, type RouteSummary, type SelectedRoute } from './routeTypes'
-import { graphql, TOKEN_KEY } from '../graphql'
+import {
+  EMPTY_FILTERS,
+  PAGE_SIZE,
+  filterVariables,
+  type Bounds,
+  type Route,
+  type RouteFilterValue,
+  type RouteGroup,
+  type RouteSort,
+  type RouteSummary,
+  type SelectedRoute,
+} from '../../lib/routeTypes'
+import { graphql, TOKEN_KEY } from '../../lib/graphql'
 
 /** Hvor kartet starter når brukeren ikke har valgt et sted i profilen */
 const OSLO: Bounds = { west: 10.48, south: 59.81, east: 10.95, north: 60.14 }
 /** Utsnittet «Vis hele Norge» går til */
 const NORWAY: Bounds = { west: 4.5, south: 57.9, east: 31.2, north: 71.2 }
-const toBounds = (bbox: number[]): Bounds => ({ west: bbox[0], south: bbox[1], east: bbox[2], north: bbox[3] })
+const toBounds = (bbox: number[]): Bounds => ({
+  west: bbox[0],
+  south: bbox[1],
+  east: bbox[2],
+  north: bbox[3],
+})
 
 const LIST_QUERY = `query($minLength:Float,$maxLength:Float,$difficulty:[String!],$routeType:[String!],$facility:[String!],$sort:RouteSort,
   $west:Float,$south:Float,$east:Float,$north:Float,$offset:Int!,$limit:Int!){
   routes(search:"",minLength:$minLength,maxLength:$maxLength,difficulty:$difficulty,routeType:$routeType,facility:$facility,sort:$sort,
     west:$west,south:$south,east:$east,north:$north,offset:$offset,limit:$limit){
-    total items{key name variantCount minLengthMeters maxLengthMeters favoriteCount variants{id name number lengthMeters difficulty routeType duplicateCount variantCount}}
+    total items{ ${ROUTE_GROUP_FIELDS} }
   }
 }`
 const ROUTE_QUERY = `query($name:String!,$number:String!){
@@ -42,16 +59,28 @@ type Props = {
   onSaveRoute: () => void
 }
 
-export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded, authenticated, onSaveRoute }: Props) {
+export default function Explore({
+  selected,
+  onSelect,
+  onDeselect,
+  onRouteLoaded,
+  authenticated,
+  onSaveRoute,
+}: Props) {
   // --- Valgt tur ---
   const [route, setRoute] = useState<Route | null>(null)
   const [routeVariants, setRouteVariants] = useState<RouteSummary[]>([])
-  const [status, setStatus] = useState<'loading' | 'ready' | 'error' | 'empty'>(selected ? 'loading' : 'empty')
+  const [status, setStatus] = useState<'loading' | 'ready' | 'error' | 'empty'>(
+    selected ? 'loading' : 'empty',
+  )
   const [attempt, setAttempt] = useState(0)
   // Når en ny tur velges (her eller fra forsiden/profilen), vis «henter» til den er lastet.
   // Justeres under rendering i stedet for i en effekt, slik React anbefaler.
   const [prevSelected, setPrevSelected] = useState(selected)
-  if (selected !== prevSelected) { setPrevSelected(selected); setStatus(selected ? 'loading' : 'empty') }
+  if (selected !== prevSelected) {
+    setPrevSelected(selected)
+    setStatus(selected ? 'loading' : 'empty')
+  }
 
   // --- Filtre og sortering ---
   const [filters, setFilters] = useState<RouteFilterValue>(EMPTY_FILTERS)
@@ -63,7 +92,10 @@ export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded,
   const [total, setTotal] = useState(0)
   const [listStatus, setListStatus] = useState<'loading' | 'ready' | 'error'>('loading')
   /** Starter lista på nytt fra side 1 (når filtre, sortering eller kartutsnitt endres) */
-  const restartList = () => { setPage(0); setListStatus('loading') }
+  const restartList = () => {
+    setPage(0)
+    setListStatus('loading')
+  }
 
   // --- Kartet ---
   // Kartutsnittet fra ExploreMap. null = ingen begrensning (hele Norge).
@@ -71,7 +103,8 @@ export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded,
   // Hvor kartet skal være. Starter i Oslo, eller på stedet brukeren har valgt i profilen (samme sted som forsiden
   // bruker). Endres også når man velger et sted i søket eller trykker «Vis hele Norge».
   const [focus, setFocus] = useState<MapFocus>({ bounds: OSLO, key: 0 })
-  const flyTo = (next: Bounds, clearFilter = false) => setFocus(previous => ({ bounds: next, key: previous.key + 1, clearFilter }))
+  const flyTo = (next: Bounds, clearFilter = false) =>
+    setFocus((previous) => ({ bounds: next, key: previous.key + 1, clearFilter }))
   // Sted valgt fra søket i kartet. Vises som merkelapp, og fjernes når brukeren selv flytter kartet.
   const [place, setPlace] = useState<{ code: string; name: string } | null>(null)
 
@@ -81,8 +114,11 @@ export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded,
     if (!authenticated || !token) return
     const controller = new AbortController()
     graphql<{ me: { homeMunicipality: { bbox: number[] | null } | null } | null }>(
-      'query($token:String!){me(token:$token){homeMunicipality{bbox}}}', { token }, controller.signal)
-      .then(data => {
+      'query($token:String!){me(token:$token){homeMunicipality{bbox}}}',
+      { token },
+      controller.signal,
+    )
+      .then((data) => {
         const bbox = data.me?.homeMunicipality?.bbox
         if (bbox?.length === 4) flyTo(toBounds(bbox))
       })
@@ -94,12 +130,28 @@ export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded,
   // En ny forespørsel avbryter den forrige, så svar som kommer i feil rekkefølge aldri vises.
   useEffect(() => {
     const controller = new AbortController()
-    graphql<{ routes: { total: number; items: RouteGroup[] } }>(LIST_QUERY, {
-      ...filterVariables(filters), sort, offset: page * PAGE_SIZE, limit: PAGE_SIZE,
-      west: bounds?.west ?? null, south: bounds?.south ?? null, east: bounds?.east ?? null, north: bounds?.north ?? null,
-    }, controller.signal)
-      .then(data => { setItems(data.routes.items); setTotal(data.routes.total); setListStatus('ready') })
-      .catch(() => { if (!controller.signal.aborted) setListStatus('error') })
+    graphql<{ routes: { total: number; items: RouteGroup[] } }>(
+      LIST_QUERY,
+      {
+        ...filterVariables(filters),
+        sort,
+        offset: page * PAGE_SIZE,
+        limit: PAGE_SIZE,
+        west: bounds?.west ?? null,
+        south: bounds?.south ?? null,
+        east: bounds?.east ?? null,
+        north: bounds?.north ?? null,
+      },
+      controller.signal,
+    )
+      .then((data) => {
+        setItems(data.routes.items)
+        setTotal(data.routes.total)
+        setListStatus('ready')
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) setListStatus('error')
+      })
     return () => controller.abort()
   }, [filters, sort, bounds, page])
 
@@ -107,33 +159,88 @@ export default function Explore({ selected, onSelect, onDeselect, onRouteLoaded,
   useEffect(() => {
     if (!selected) return
     const controller = new AbortController()
-    graphql<{ route: Route | null; routeVariants: RouteSummary[] }>(ROUTE_QUERY, { name: selected.name, number: selected.number }, controller.signal)
-      .then(data => {
+    graphql<{ route: Route | null; routeVariants: RouteSummary[] }>(
+      ROUTE_QUERY,
+      { name: selected.name, number: selected.number },
+      controller.signal,
+    )
+      .then((data) => {
         setRoute(data.route)
         setRouteVariants(data.routeVariants)
         setStatus(data.route ? 'ready' : 'empty')
-        onRouteLoaded(data.route ? { id: data.route.id, name: data.route.name, number: data.route.number } : null)
+        onRouteLoaded(
+          data.route
+            ? { id: data.route.id, name: data.route.name, number: data.route.number }
+            : null,
+        )
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) setStatus('error')
       })
-      .catch(() => { if (!controller.signal.aborted) setStatus('error') })
     return () => controller.abort()
   }, [selected, attempt, onRouteLoaded])
 
-  return <section className="explore-map" aria-label="Kart og søk etter turer">
-    <ExploreMap focus={focus} selectedGeojson={status === 'ready' && route ? route.geojson : null}
-      onBoundsChange={(next, byUser) => { setBounds(next); restartList(); if (byUser) setPlace(null) }} />
-    <ExploreFilters value={filters} onChange={next => { setFilters(next); restartList() }} />
-    <ExploreSearchPanel
-      filters={filters} sort={sort} onSortChange={next => { setSort(next); restartList() }}
-      items={items} total={total} listStatus={listStatus} page={page}
-      onPageChange={next => { setPage(next); setListStatus('loading') }}
-      filtered={bounds !== null}
-      onShowAll={() => { flyTo(NORWAY, true); setBounds(null); setPlace(null); restartList() }}
-      place={place} onClearPlace={() => setPlace(null)}
-      onChoosePlace={(hit: PlaceHit) => { if (hit.bbox?.length === 4) { setPlace({ code: hit.code, name: hit.name }); flyTo(toBounds(hit.bbox)) } }}
-      onChooseRoute={onSelect}
-      selected={selected} route={route} routeVariants={routeVariants} status={status}
-      onRetry={() => { setStatus('loading'); setAttempt(attempt + 1) }}
-      onBack={onDeselect}
-      authenticated={authenticated} onSaveRoute={onSaveRoute} />
-  </section>
+  return (
+    <section className="explore-map" aria-label="Kart og søk etter turer">
+      <ExploreMap
+        focus={focus}
+        selectedGeojson={status === 'ready' && route ? route.geojson : null}
+        onBoundsChange={(next, byUser) => {
+          setBounds(next)
+          restartList()
+          if (byUser) setPlace(null)
+        }}
+      />
+      <ExploreFilters
+        value={filters}
+        onChange={(next) => {
+          setFilters(next)
+          restartList()
+        }}
+      />
+      <ExploreSearchPanel
+        filters={filters}
+        sort={sort}
+        onSortChange={(next) => {
+          setSort(next)
+          restartList()
+        }}
+        items={items}
+        total={total}
+        listStatus={listStatus}
+        page={page}
+        onPageChange={(next) => {
+          setPage(next)
+          setListStatus('loading')
+        }}
+        filtered={bounds !== null}
+        onShowAll={() => {
+          flyTo(NORWAY, true)
+          setBounds(null)
+          setPlace(null)
+          restartList()
+        }}
+        place={place}
+        onClearPlace={() => setPlace(null)}
+        onChoosePlace={(hit: PlaceHit) => {
+          if (hit.bbox?.length === 4) {
+            setPlace({ code: hit.code, name: hit.name })
+            flyTo(toBounds(hit.bbox))
+          }
+        }}
+        onChooseRoute={onSelect}
+        selected={selected}
+        route={route}
+        routeVariants={routeVariants}
+        status={status}
+        onRetry={() => {
+          setStatus('loading')
+          setAttempt(attempt + 1)
+        }}
+        onBack={onDeselect}
+        authenticated={authenticated}
+        onSaveRoute={onSaveRoute}
+      />
+    </section>
+  )
 }
diff --git a/src/features/Explore/ExploreFilters.css b/src/features/Explore/ExploreFilters.css
new file mode 100644
index 0000000..0187b66
--- /dev/null
+++ b/src/features/Explore/ExploreFilters.css
@@ -0,0 +1,191 @@
+/* Filterraden øverst i kartet (ExploreFilters.tsx). Ligger til høyre for søkepanelet på stor skjerm. */
+.ef {
+  position: absolute;
+  z-index: 3;
+  top: 16px;
+  left: 432px;
+  right: 64px;
+  font-family: 'Avenir Next', system-ui, sans-serif;
+  pointer-events: none;
+}
+.ef-row,
+.ef-menu {
+  pointer-events: auto;
+}
+.ef-row {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 3px;
+  scrollbar-width: none;
+}
+.ef-row::-webkit-scrollbar {
+  display: none;
+}
+.explore-app .ef-pill {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  color: #23382c;
+  border: 1px solid #dce3d5;
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 2px 10px #23382c1f;
+}
+.explore-app .ef-pill:hover:not(:disabled),
+.explore-app .ef-pill[aria-expanded='true'] {
+  background: #f4f7f1;
+  border-color: #a2b398;
+}
+.explore-app .ef-pill[data-active] {
+  background: #435d47;
+  border-color: #435d47;
+  color: #fff;
+}
+.explore-app .ef-pill[data-active]:hover:not(:disabled) {
+  background: #304c37;
+}
+.explore-app .ef-reset {
+  color: #435d47;
+}
+.ef-pill svg {
+  transition: transform 0.15s;
+}
+.ef-pill[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+.ef-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  width: min(340px, 100%);
+  max-height: min(480px, calc(100vh - 220px));
+  overflow-y: auto;
+  padding: 16px;
+  background: #fff;
+  color: #23382c;
+  border-radius: 14px;
+  box-shadow: 0 12px 36px #23382c38;
+}
+.ef-menu h3 {
+  margin: 0 0 12px;
+  font-size: 14px;
+}
+.ef-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.ef-options.ef-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.ef-options.ef-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ef-options.ef-stack {
+  display: grid;
+}
+.explore-app .ef-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+  background: #fff;
+  color: #23382c;
+  border: 1px solid #dce3d5;
+  border-radius: 12px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+.explore-app .ef-option:hover:not(:disabled) {
+  background: #f4f7f1;
+  border-color: #a2b398;
+}
+.explore-app .ef-option[aria-pressed='true'] {
+  background: #eef3e9;
+  border-color: #435d47;
+  box-shadow: inset 0 0 0 1px #435d47;
+}
+.ef-option small {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-weight: 400;
+  color: #6b7768;
+}
+.ef-option svg {
+  flex-shrink: 0;
+  color: #435d47;
+}
+.ef-length-form {
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  margin-top: 14px;
+}
+.ef-length-form label {
+  flex: 1;
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7768;
+}
+.ef-length-form input {
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  font-size: 13px;
+  color: #23382c;
+  border: 1px solid #dce3d5;
+  border-radius: 9px;
+  padding: 9px 10px;
+}
+.explore-app .ef-length-form button {
+  font-size: 12px;
+  padding: 10px 14px;
+}
+.ef-note {
+  margin: 12px 0 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #6b7768;
+}
+.ef-menu-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e3e8df;
+}
+.explore-app .ef-menu-footer .text-button {
+  padding: 0;
+  font-size: 13px;
+}
+.explore-app .ef-menu-footer button:last-child {
+  font-size: 13px;
+  padding: 9px 16px;
+}
+@media (max-width: 720px) {
+  .ef {
+    top: 10px;
+    left: 10px;
+    right: 56px;
+  }
+  .ef-options.ef-grid-3 {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ef-pill svg {
+    transition: none;
+  }
+}
diff --git a/src/features/Explore/ExploreFilters.tsx b/src/features/Explore/ExploreFilters.tsx
new file mode 100644
index 0000000..56a13f5
--- /dev/null
+++ b/src/features/Explore/ExploreFilters.tsx
@@ -0,0 +1,347 @@
+// Filterknappene øverst i kartet på Utforsk turer: Vanskelighetsgrad, Lengde, Turtype og Langs turen.
+// Hver knapp åpner en liten meny. Endringer gjelder med en gang og påvirker både turene i kartutsnittet
+// og turforslagene i søket. Selve filtreringen skjer i databasen (routes-spørringen).
+// En knapp med aktivt filter blir fylt og viser hva som er valgt, så man ser det uten å åpne menyen.
+import { useEffect, useRef, useState } from 'react'
+import { placeCategories } from '../../lib/placeCategories'
+import { EMPTY_FILTERS, type RouteFilterValue } from '../../lib/routeTypes'
+import './ExploreFilters.css'
+
+type MenuId = 'difficulty' | 'length' | 'routeType' | 'facilities'
+
+const DIFFICULTIES = ['Enkel', 'Middels', 'Krevende', 'Ekspert', 'Ikke gradert']
+const ROUTE_TYPES = [
+  { value: 'Avledet rundtur', label: 'Rundtur', hint: 'Starter og slutter på samme sted' },
+  { value: 'Hovedrute', label: 'Hovedrute', hint: 'Registrerte hovedtraséer' },
+  { value: 'Materute', label: 'Materute', hint: 'Ruter inn til hovedruter' },
+]
+const LENGTH_PRESETS: { label: string; hint: string; min: number | null; max: number | null }[] = [
+  { label: 'Kort', hint: 'Under 5 km', min: null, max: 5 },
+  { label: 'Mellomlang', hint: '5–15 km', min: 5, max: 15 },
+  { label: 'Lang', hint: 'Over 15 km', min: 15, max: null },
+]
+/** Enkle strekikoner (24×24) for stedstypene i placeCategories */
+const ICONS: Record<string, string> = {
+  hut: 'M3 11 12 4l9 7M5 9.5V20h14V9.5M10 20v-5h4v5',
+  shelter: 'M3 20 13 5l8 15M2 20h20M9 20l4-6',
+  viewpoint:
+    'M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12ZM12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z',
+  picnic_site: 'M3 9h18M7 9l-3 10M17 9l3 10M5.5 14h13M12 9V5',
+  toilets:
+    'M7 3.5a1.5 1.5 0 1 0 0 .01M17 3.5a1.5 1.5 0 1 0 0 .01M5 21v-6H4l1.5-7h3L10 15H9v6M15 21V8h4v13',
+  drinking_water: 'M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11Z',
+  parking: 'M5 3h14v18H5zM10 17V7h3a3 3 0 0 1 0 6h-3',
+  camp_site: 'M2 20h20M4 20 12 5l8 15M12 20l-3-5M12 20l3-5',
+  peak: 'M2 20 9 8l4 6 3-4 6 10H2Z',
+}
+
+/** Hva «Nullstill» i hver meny setter tilbake */
+const CLEARED: Record<MenuId, Partial<RouteFilterValue>> = {
+  difficulty: { difficulties: [] },
+  length: { minLength: null, maxLength: null },
+  routeType: { routeTypes: [] },
+  facilities: { facilities: [] },
+}
+
+const fmt = (value: number) => value.toLocaleString('nb-NO')
+function toggle(list: string[], value: string) {
+  return list.includes(value) ? list.filter((item) => item !== value) : [...list, value]
+}
+/** «Enkel, Middels» eller «Enkel +2» */
+function summary(values: string[], labelOf: (value: string) => string = (value) => value) {
+  if (!values.length) return null
+  return values.length <= 2
+    ? values.map(labelOf).join(', ')
+    : `${labelOf(values[0])} +${values.length - 1}`
+}
+function lengthSummary(min: number | null, max: number | null) {
+  if (min == null && max == null) return null
+  if (min == null) return `Under ${fmt(max!)} km`
+  if (max == null) return `Over ${fmt(min)} km`
+  return `${fmt(min)}–${fmt(max)} km`
+}
+const routeTypeLabel = (value: string) =>
+  ROUTE_TYPES.find((type) => type.value === value)?.label ?? value
+const facilityLabel = (value: string) =>
+  placeCategories.find((category) => category.value === value)?.label ?? value
+
+type Props = { value: RouteFilterValue; onChange: (next: RouteFilterValue) => void }
+
+export default function ExploreFilters({ value, onChange }: Props) {
+  const [open, setOpen] = useState<MenuId | null>(null)
+  /** Hvor menyen plasseres, i piksler fra venstre kant av filterraden */
+  const [anchor, setAnchor] = useState(0)
+  const [minInput, setMinInput] = useState('')
+  const [maxInput, setMaxInput] = useState('')
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const buttonRefs = useRef<Partial<Record<MenuId, HTMLButtonElement | null>>>({})
+
+  // Lukk menyen ved klikk utenfor eller Escape (samme mønster som profilmenyen i SiteNav)
+  useEffect(() => {
+    if (!open) return
+    const close = (event: PointerEvent) => {
+      if (!wrapRef.current?.contains(event.target as Node)) setOpen(null)
+    }
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(null)
+        buttonRefs.current[open]?.focus()
+      }
+    }
+    document.addEventListener('pointerdown', close)
+    document.addEventListener('keydown', escape)
+    // Flytt fokus inn i menyen, så tastaturbrukere kommer rett til valgene
+    const frame = window.requestAnimationFrame(() =>
+      menuRef.current?.querySelector<HTMLElement>('button, input')?.focus(),
+    )
+    return () => {
+      document.removeEventListener('pointerdown', close)
+      document.removeEventListener('keydown', escape)
+      window.cancelAnimationFrame(frame)
+    }
+  }, [open])
+
+  function toggleMenu(id: MenuId) {
+    if (open === id) {
+      setOpen(null)
+      return
+    }
+    const button = buttonRefs.current[id],
+      wrap = wrapRef.current
+    if (button && wrap) {
+      const left = button.getBoundingClientRect().left - wrap.getBoundingClientRect().left
+      setAnchor(Math.max(0, Math.min(left, wrap.clientWidth - 340)))
+    }
+    if (id === 'length') {
+      setMinInput(value.minLength?.toString() ?? '')
+      setMaxInput(value.maxLength?.toString() ?? '')
+    }
+    setOpen(id)
+  }
+  function done() {
+    const current = open
+    setOpen(null)
+    if (current) buttonRefs.current[current]?.focus()
+  }
+
+  const buttons: { id: MenuId; label: string; active: string | null }[] = [
+    { id: 'difficulty', label: 'Vanskelighetsgrad', active: summary(value.difficulties) },
+    { id: 'length', label: 'Lengde', active: lengthSummary(value.minLength, value.maxLength) },
+    { id: 'routeType', label: 'Turtype', active: summary(value.routeTypes, routeTypeLabel) },
+    { id: 'facilities', label: 'Langs turen', active: summary(value.facilities, facilityLabel) },
+  ]
+  const anyActive = buttons.some((button) => button.active)
+  const current = buttons.find((button) => button.id === open)
+
+  return (
+    <div className="ef" ref={wrapRef}>
+      <div className="ef-row" role="group" aria-label="Filtrer turer">
+        {buttons.map((button) => (
+          <button
+            key={button.id}
+            type="button"
+            className="ef-pill"
+            ref={(element) => {
+              buttonRefs.current[button.id] = element
+            }}
+            data-active={button.active ? 'true' : undefined}
+            aria-expanded={open === button.id}
+            aria-controls={open === button.id ? 'ef-menu' : undefined}
+            aria-label={button.active ? `${button.label}: ${button.active}` : button.label}
+            onClick={() => toggleMenu(button.id)}
+          >
+            {button.active ?? button.label}
+            <svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14">
+              <path
+                d="m4 6 4 4 4-4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        ))}
+        {anyActive && (
+          <button
+            type="button"
+            className="ef-pill ef-reset"
+            onClick={() => {
+              onChange(EMPTY_FILTERS)
+              setOpen(null)
+            }}
+          >
+            Nullstill filtre
+          </button>
+        )}
+      </div>
+
+      {open && current && (
+        <div
+          id="ef-menu"
+          ref={menuRef}
+          className="ef-menu"
+          style={{ left: anchor }}
+          role="dialog"
+          aria-label={current.label}
+        >
+          <h3>{current.label}</h3>
+
+          {open === 'difficulty' && (
+            <div className="ef-options">
+              {DIFFICULTIES.map((item) => (
+                <button
+                  key={item}
+                  type="button"
+                  className="ef-option"
+                  aria-pressed={value.difficulties.includes(item)}
+                  onClick={() =>
+                    onChange({ ...value, difficulties: toggle(value.difficulties, item) })
+                  }
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {open === 'length' && (
+            <>
+              <div className="ef-options ef-grid-3">
+                {LENGTH_PRESETS.map((preset) => (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    className="ef-option"
+                    aria-pressed={value.minLength === preset.min && value.maxLength === preset.max}
+                    onClick={() => {
+                      const active =
+                        value.minLength === preset.min && value.maxLength === preset.max
+                      onChange({
+                        ...value,
+                        minLength: active ? null : preset.min,
+                        maxLength: active ? null : preset.max,
+                      })
+                    }}
+                  >
+                    <span>
+                      {preset.label}
+                      <small>{preset.hint}</small>
+                    </span>
+                  </button>
+                ))}
+              </div>
+              <form
+                className="ef-length-form"
+                onSubmit={(event) => {
+                  event.preventDefault()
+                  const min = minInput ? Number(minInput) : null,
+                    max = maxInput ? Number(maxInput) : null
+                  onChange({
+                    ...value,
+                    minLength: min,
+                    maxLength: max != null && min != null && max < min ? min : max,
+                  })
+                }}
+              >
+                <label>
+                  Fra (km)
+                  <input
+                    type="number"
+                    inputMode="decimal"
+                    min="0"
+                    step="0.5"
+                    value={minInput}
+                    onChange={(event) => setMinInput(event.target.value)}
+                  />
+                </label>
+                <label>
+                  Til (km)
+                  <input
+                    type="number"
+                    inputMode="decimal"
+                    min="0"
+                    step="0.5"
+                    value={maxInput}
+                    onChange={(event) => setMaxInput(event.target.value)}
+                  />
+                </label>
+                <button type="submit">Bruk</button>
+              </form>
+            </>
+          )}
+
+          {open === 'routeType' && (
+            <div className="ef-options ef-stack">
+              {ROUTE_TYPES.map((type) => (
+                <button
+                  key={type.value}
+                  type="button"
+                  className="ef-option"
+                  aria-pressed={value.routeTypes.includes(type.value)}
+                  onClick={() =>
+                    onChange({ ...value, routeTypes: toggle(value.routeTypes, type.value) })
+                  }
+                >
+                  <span>
+                    {type.label}
+                    <small>{type.hint}</small>
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {open === 'facilities' && (
+            <>
+              <div className="ef-options ef-grid">
+                {placeCategories.map((category) => (
+                  <button
+                    key={category.value}
+                    type="button"
+                    className="ef-option"
+                    aria-pressed={value.facilities.includes(category.value)}
+                    onClick={() =>
+                      onChange({ ...value, facilities: toggle(value.facilities, category.value) })
+                    }
+                  >
+                    <svg aria-hidden="true" viewBox="0 0 24 24" width="22" height="22">
+                      <path
+                        d={ICONS[category.value]}
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.7"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    {category.label}
+                  </button>
+                ))}
+              </div>
+              <p className="ef-note">
+                Steder fra OpenStreetMap innen 500 m i luftlinje fra turen. Velger du flere, må
+                turen ha alle. Første søk på en ny type kan ta litt tid.
+              </p>
+            </>
+          )}
+
+          <div className="ef-menu-footer">
+            <button
+              type="button"
+              className="text-button"
+              onClick={() => onChange({ ...value, ...CLEARED[open] })}
+            >
+              Nullstill
+            </button>
+            <button type="button" onClick={done}>
+              Ferdig
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/features/Explore/ExploreMap.css b/src/features/Explore/ExploreMap.css
new file mode 100644
index 0000000..531bcd8
--- /dev/null
+++ b/src/features/Explore/ExploreMap.css
@@ -0,0 +1,71 @@
+/* Stort utforskningskart øverst på Utforsk turer (ExploreMap.tsx) */
+/* Kartet går helt ut til kantene av vinduet (bryter ut av main sin padding og maksbredde)
+   og fyller skjermhøyden under toppmenyen. calc(50% - 50vw) flytter kantene ut til vinduets kant. */
+.explore-app {
+  overflow-x: clip;
+}
+.explore-map {
+  position: relative;
+  height: clamp(480px, calc(100svh - 86px), 900px);
+  margin: -24px calc(50% - 50vw) 32px;
+  overflow: hidden;
+  background: #e4eadb;
+  border-bottom: 1px solid #e3e8df;
+}
+.explore-map-canvas-wrap,
+.explore-map-canvas {
+  position: absolute;
+  inset: 0;
+}
+.explore-map-error {
+  position: absolute;
+  z-index: 3;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 420px;
+  margin: 0;
+  padding: 10px 14px;
+  background: #fff;
+  border-radius: 10px;
+  font-size: 13px;
+}
+/* Hindrer at de generelle knappestilene i .explore-app gjør kartets zoomknapper grønne */
+.explore-app .explore-map .maplibregl-ctrl-group button {
+  background-color: #fff;
+  color: #23382c;
+  padding: 0;
+  border-radius: 0;
+  width: 36px;
+  height: 36px;
+  transition: none;
+}
+.explore-app .explore-map .maplibregl-ctrl-group button:hover:not(:disabled) {
+  background-color: #edf2e9;
+}
+.explore-app .explore-map .maplibregl-ctrl-group {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px #23382c22;
+}
+.explore-map .maplibregl-ctrl-top-right {
+  margin: 6px;
+}
+@media (max-width: 1050px) {
+  .explore-map {
+    margin-top: -20px;
+  }
+}
+@media (max-width: 720px) {
+  .explore-map {
+    margin-top: -16px;
+    height: clamp(420px, calc(100svh - 130px), 700px);
+  }
+  .explore-map .maplibregl-ctrl-bottom-right {
+    bottom: 55%;
+  }
+  .explore-map-error {
+    bottom: auto;
+    top: 10px;
+  }
+}
diff --git a/src/Explore/ExploreMap.tsx b/src/features/Explore/ExploreMap.tsx
similarity index 73%
rename from src/Explore/ExploreMap.tsx
rename to src/features/Explore/ExploreMap.tsx
index c6eda24..37c86ca 100644
--- a/src/Explore/ExploreMap.tsx
+++ b/src/features/Explore/ExploreMap.tsx
@@ -9,17 +9,24 @@ import * as maplibregl from 'maplibre-gl'
 import type { GeoJSONSource, StyleSpecification } from 'maplibre-gl'
 import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
 import type { Feature, FeatureCollection, LineString, MultiLineString } from 'geojson'
-import type { Bounds } from './routeTypes'
+import type { Bounds } from '../../lib/routeTypes'
 import './ExploreMap.css'
 
 // MapLibre tegner kartet i en egen tråd (web worker). Vite trenger å vite hvor worker-fila ligger.
 maplibregl.setWorkerUrl(workerUrl)
 
 /** Et område kartet skal fly til. key økes for hver ny forespørsel, så samme område kan velges flere ganger. */
-export type MapFocus = { bounds: Bounds; key: number; /** Ikke filtrer lista på det nye utsnittet («Vis hele Norge») */ clearFilter?: boolean }
+export type MapFocus = {
+  bounds: Bounds
+  key: number
+  /** Ikke filtrer lista på det nye utsnittet («Vis hele Norge») */ clearFilter?: boolean
+}
 
 /** Hvor langt brukeren kan dra kartet bort fra Norge */
-const MAX_BOUNDS: maplibregl.LngLatBoundsLike = [[-10, 54], [45, 81.5]]
+const MAX_BOUNDS: maplibregl.LngLatBoundsLike = [
+  [-10, 54],
+  [45, 81.5],
+]
 /** Venter litt etter at kartet stopper før lista oppdateres, så vi ikke sender en forespørsel per bevegelse */
 const BOUNDS_DELAY_MS = 400
 
@@ -32,7 +39,8 @@ const MAP_STYLE: StyleSpecification = {
       tiles: ['https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png'],
       tileSize: 256,
       maxzoom: 18,
-      attribution: '© Kartverket · © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap-bidragsytere</a>',
+      attribution:
+        '© Kartverket · © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap-bidragsytere</a>',
     },
   },
   layers: [{ id: 'topo', type: 'raster', source: 'topo' }],
@@ -41,7 +49,10 @@ const MAP_STYLE: StyleSpecification = {
 const EMPTY: FeatureCollection = { type: 'FeatureCollection', features: [] }
 const round = (value: number) => Math.round(value * 10000) / 10000
 const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches
-const toLngLat = (b: Bounds): maplibregl.LngLatBoundsLike => [[b.west, b.south], [b.east, b.north]]
+const toLngLat = (b: Bounds): maplibregl.LngLatBoundsLike => [
+  [b.west, b.south],
+  [b.east, b.north],
+]
 
 /** Søkepanelet ligger oppå kartet (til venstre på stor skjerm, nederst på mobil).
  *  Når vi zoomer til et område eller en tur, holder vi av plass til panelet så det ikke dekker det. */
@@ -68,7 +79,9 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
   const [error, setError] = useState('')
   // Kartets hendelser bruker alltid siste versjon av callbacken, uten at kartet må lages på nytt
   const onBoundsChangeRef = useRef(onBoundsChange)
-  useEffect(() => { onBoundsChangeRef.current = onBoundsChange })
+  useEffect(() => {
+    onBoundsChangeRef.current = onBoundsChange
+  })
   // Fokuset kartet ble laget med, og sist fokus vi har flydd til
   const lastFocus = useRef(focus)
 
@@ -99,7 +112,9 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
     } catch {
       // Nettleseren støtter ikke WebGL. Dette rapporterer feil fra et eksternt system, ikke avledet state.
       // eslint-disable-next-line react-hooks/set-state-in-effect
-      setError('Kartet kunne ikke åpnes i denne nettleseren. Du kan fortsatt søke og filtrere i lista under.')
+      setError(
+        'Kartet kunne ikke åpnes i denne nettleseren. Du kan fortsatt søke og filtrere i lista under.',
+      )
       return
     }
     map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right')
@@ -107,8 +122,18 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
 
     map.on('load', () => {
       map.addSource('selected-route', { type: 'geojson', data: EMPTY })
-      map.addLayer({ id: 'selected-route-outline', type: 'line', source: 'selected-route', paint: { 'line-color': '#fff', 'line-width': 8 } })
-      map.addLayer({ id: 'selected-route-line', type: 'line', source: 'selected-route', paint: { 'line-color': '#126b51', 'line-width': 4 } })
+      map.addLayer({
+        id: 'selected-route-outline',
+        type: 'line',
+        source: 'selected-route',
+        paint: { 'line-color': '#fff', 'line-width': 8 },
+      })
+      map.addLayer({
+        id: 'selected-route-line',
+        type: 'line',
+        source: 'selected-route',
+        paint: { 'line-color': '#126b51', 'line-width': 4 },
+      })
       setLoaded(true)
     })
     map.on('error', () => setError('En del av kartet kunne ikke lastes. Lista fungerer fortsatt.'))
@@ -119,17 +144,30 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
     let timer: number | undefined
     const report = (byUser: boolean) => {
       const b = map.getBounds()
-      onBoundsChangeRef.current({ west: round(b.getWest()), south: round(b.getSouth()), east: round(b.getEast()), north: round(b.getNorth()) }, byUser)
+      onBoundsChangeRef.current(
+        {
+          west: round(b.getWest()),
+          south: round(b.getSouth()),
+          east: round(b.getEast()),
+          north: round(b.getNorth()),
+        },
+        byUser,
+      )
     }
     map.once('load', () => report(false))
-    map.on('moveend', event => {
+    map.on('moveend', (event) => {
       const { programmatic, skipReport } = event as { programmatic?: boolean; skipReport?: boolean }
       window.clearTimeout(timer)
       if (skipReport) return
       timer = window.setTimeout(() => report(!programmatic), programmatic ? 0 : BOUNDS_DELAY_MS)
     })
 
-    return () => { window.clearTimeout(timer); map.remove(); mapRef.current = null; setLoaded(false) }
+    return () => {
+      window.clearTimeout(timer)
+      map.remove()
+      mapRef.current = null
+      setLoaded(false)
+    }
   }, [])
 
   // 2. Fly til nytt fokus: brukerens sted fra profilen, et sted fra søket, eller hele Norge
@@ -137,8 +175,11 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
     const map = mapRef.current
     if (!map || !container.current || focus.key === lastFocus.current.key) return
     lastFocus.current = focus
-    map.fitBounds(toLngLat(focus.bounds), { padding: panelPadding(container.current), duration: reducedMotion() ? 0 : 900 },
-      { programmatic: true, skipReport: focus.clearFilter })
+    map.fitBounds(
+      toLngLat(focus.bounds),
+      { padding: panelPadding(container.current), duration: reducedMotion() ? 0 : 900 },
+      { programmatic: true, skipReport: focus.clearFilter },
+    )
   }, [focus])
 
   // 3. Tegn valgt tur og zoom til den
@@ -146,20 +187,40 @@ export default function ExploreMap({ focus, onBoundsChange, selectedGeojson }: P
     const map = mapRef.current
     if (!map || !loaded || !container.current) return
     const source = map.getSource('selected-route') as GeoJSONSource | undefined
-    if (!selectedGeojson) { source?.setData(EMPTY); return }
+    if (!selectedGeojson) {
+      source?.setData(EMPTY)
+      return
+    }
     try {
       const geometry = JSON.parse(selectedGeojson) as LineString | MultiLineString
       const feature: Feature = { type: 'Feature', properties: {}, geometry }
       source?.setData(feature)
-      const points = geometry.type === 'LineString' ? geometry.coordinates : geometry.coordinates.flat()
+      const points =
+        geometry.type === 'LineString' ? geometry.coordinates : geometry.coordinates.flat()
       const bounds = new maplibregl.LngLatBounds()
       points.forEach(([lng, lat]) => bounds.extend([lng, lat]))
-      map.fitBounds(bounds, { padding: panelPadding(container.current), maxZoom: 14, duration: reducedMotion() ? 0 : 900 }, { programmatic: true })
-    } catch { source?.setData(EMPTY) }
+      map.fitBounds(
+        bounds,
+        {
+          padding: panelPadding(container.current),
+          maxZoom: 14,
+          duration: reducedMotion() ? 0 : 900,
+        },
+        { programmatic: true },
+      )
+    } catch {
+      source?.setData(EMPTY)
+    }
   }, [selectedGeojson, loaded])
 
-  return <div className="explore-map-canvas-wrap">
-    <div ref={container} className="explore-map-canvas" />
-    {error && <p className="explore-map-error" role="alert">{error}</p>}
-  </div>
+  return (
+    <div className="explore-map-canvas-wrap">
+      <div ref={container} className="explore-map-canvas" />
+      {error && (
+        <p className="explore-map-error" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  )
 }
diff --git a/src/features/Explore/ExploreSearchPanel.css b/src/features/Explore/ExploreSearchPanel.css
new file mode 100644
index 0000000..9e6ed53
--- /dev/null
+++ b/src/features/Explore/ExploreSearchPanel.css
@@ -0,0 +1,293 @@
+/* Søkepanelet oppå kartet på Utforsk turer (ExploreSearchPanel.tsx).
+   Stor skjerm: kort øverst til venstre. Mobil: panel nederst, med kartet synlig over. */
+.esp {
+  position: absolute;
+  z-index: 2;
+  top: 16px;
+  left: 16px;
+  width: min(400px, calc(100% - 100px));
+  max-height: calc(100% - 32px);
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 8px 30px #23382c2e;
+  overflow: hidden;
+  font-family: 'Avenir Next', system-ui, sans-serif;
+  color: #23382c;
+}
+.esp-search {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid #e3e8df;
+}
+.esp-search:focus-within {
+  box-shadow: inset 0 0 0 2px #435d47;
+}
+.esp-search svg {
+  flex-shrink: 0;
+  color: #667c64;
+}
+.esp-search input {
+  flex: 1;
+  min-width: 120px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 15px;
+  padding: 10px 0;
+  color: inherit;
+}
+.esp-search input:focus-visible {
+  outline: none;
+}
+.esp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  background: #e9efe4;
+  color: #435d47;
+  border-radius: 999px;
+  padding: 3px 3px 3px 11px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.explore-app .esp-chip button {
+  background: transparent;
+  color: inherit;
+  padding: 2px 7px;
+  font-size: 16px;
+  line-height: 1;
+  border-radius: 999px;
+}
+.explore-app .esp-chip button:hover:not(:disabled) {
+  background: #d8e3d1;
+}
+.esp-body {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 14px 16px 16px;
+}
+.esp-title {
+  font-size: 18px;
+  letter-spacing: -0.3px;
+  margin: 0 0 4px;
+  font-weight: 600;
+}
+.esp-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: #6b7768;
+  line-height: 1.5;
+}
+.explore-app .esp .text-button {
+  padding: 0;
+  font-size: 12px;
+  text-decoration: underline;
+}
+.esp-group {
+  margin: 14px 0 8px;
+  font-size: 10px;
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+  color: #6b7768;
+  font-weight: 600;
+}
+.esp-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+.explore-app .esp-item {
+  width: 100%;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  text-align: left;
+  background: #fff;
+  color: #23382c;
+  border: 1px solid #e3e8df;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-weight: 400;
+}
+.explore-app .esp-item:hover:not(:disabled) {
+  background: #f1f5ee;
+  border-color: #a2b398;
+}
+.explore-app .esp-item[aria-pressed='true'] {
+  background: #eef3e9;
+  border-color: #435d47;
+}
+.esp-item strong {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.esp-item-meta {
+  display: block;
+  margin-top: 3px;
+  font-size: 12px;
+  color: #6b7768;
+}
+.esp-item-icon {
+  font-size: 15px;
+  line-height: 1.3;
+  color: #677c60;
+}
+.esp-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 12px;
+  color: #6b7768;
+}
+.explore-app .esp-pager button {
+  background: #fff;
+  color: #435d47;
+  border: 1px solid #e3e8df;
+  font-size: 12px;
+  padding: 8px 12px;
+}
+.explore-app .esp-pager button:hover:not(:disabled) {
+  background: #edf2e9;
+}
+.explore-app .esp .esp-back {
+  font-size: 13px;
+  text-decoration: none;
+  margin-bottom: 8px;
+}
+.esp-eyebrow {
+  margin: 8px 0 0;
+  font-size: 10px;
+  letter-spacing: 1.8px;
+  color: #6b7768;
+}
+.esp-route h2 {
+  margin: 4px 0 4px;
+  font-size: 24px;
+  letter-spacing: -0.6px;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+}
+.esp-variant label {
+  display: block;
+  margin: 4px 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7768;
+}
+.esp-variant select {
+  width: 100%;
+}
+.esp-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin: 16px 0;
+}
+.esp-stats div {
+  background: #f4f6f1;
+  border-radius: 10px;
+  padding: 10px;
+  min-width: 0;
+}
+.esp-stats strong {
+  display: block;
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+.esp-stats span {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  color: #6b7768;
+}
+.esp-description {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #3b4d40;
+  margin: 0 0 12px;
+}
+.esp-notice {
+  font-size: 12px;
+  line-height: 1.5;
+  background: #f4f0e4;
+  border-radius: 9px;
+  padding: 10px 12px;
+  margin: 12px 0;
+}
+.esp-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 16px;
+  margin-top: 16px;
+}
+.explore-app .esp-actions > button:first-child {
+  font-size: 13px;
+}
+.esp-error p {
+  margin: 0 0 10px;
+  font-size: 13px;
+}
+@media (max-width: 720px) {
+  .esp {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 55%;
+    border-radius: 16px 16px 0 0;
+  }
+  .esp-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+/* Sortering over turlista. Overstyrer de store standardstilene for select i .explore-app. */
+.esp-sort {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: -4px 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7768;
+}
+.explore-app .esp-sort select {
+  flex: 1;
+  min-height: 34px;
+  padding: 6px 32px 6px 10px !important;
+  font-size: 12px !important;
+  background-position: right 10px center !important;
+}
+/* Høydeprofilen (ElevationProfile.tsx) inne i turvisningen i panelet */
+.esp .elevation-panel {
+  margin: 18px 0 0;
+  padding: 14px;
+  border-radius: 10px;
+}
+.esp .elevation-panel h3 {
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+.esp .elevation-panel p {
+  font-size: 12px;
+}
+.esp .elevation-stats {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
diff --git a/src/features/Explore/ExploreSearchPanel.tsx b/src/features/Explore/ExploreSearchPanel.tsx
new file mode 100644
index 0000000..dab61ad
--- /dev/null
+++ b/src/features/Explore/ExploreSearchPanel.tsx
@@ -0,0 +1,389 @@
+// Søkefelt og panel oppå kartet på Utforsk turer. Panelet har tre tilstander:
+//  1. Ingenting skrevet eller valgt: turene i kartutsnittet (samme routes-spørring som lista under kartet)
+//  2. Brukeren skriver: forslag gruppert i steder (kommuner) og turer, hentet i én GraphQL-forespørsel
+//  3. En tur er valgt: informasjon om turen (RouteDetails.tsx)
+// Ett felt for både steder og turer, slik som på forsiden, så brukeren ikke trenger å vite hva som er hva.
+import { useEffect, useRef, useState } from 'react'
+import { graphql } from '../../lib/graphql'
+import RouteDetails from './RouteDetails'
+import {
+  PAGE_SIZE,
+  SORT_OPTIONS,
+  filterVariables,
+  lengthText,
+  type Route,
+  type RouteFilterValue,
+  type RouteGroup,
+  type RouteSort,
+  type RouteSummary,
+  type SelectedRoute,
+} from '../../lib/routeTypes'
+import { SEARCH_QUERY, type PlaceHit, type SearchData } from '../../lib/routeSearch'
+import { useDebouncedValue } from '../../lib/useDebouncedValue'
+import './ExploreSearchPanel.css'
+
+/** Hvor lenge vi venter etter siste tastetrykk før vi søker (debouncing, sparer requests) */
+const SEARCH_DELAY_MS = 300
+
+type Props = {
+  /** Filtrene fra filterraden. Gjelder både lista og turforslagene i søket. */
+  filters: RouteFilterValue
+  sort: RouteSort
+  onSortChange: (sort: RouteSort) => void
+  // Tilstand 1: turene i kartutsnittet
+  items: RouteGroup[]
+  total: number
+  listStatus: 'loading' | 'ready' | 'error'
+  page: number
+  onPageChange: (page: number) => void
+  /** Om lista er avgrenset til kartutsnittet */
+  filtered: boolean
+  onShowAll: () => void
+  /** Stedet som er valgt fra søket, vises som en merkelapp i søkefeltet */
+  place: { name: string } | null
+  onClearPlace: () => void
+  // Tilstand 2: søk
+  onChoosePlace: (place: PlaceHit) => void
+  onChooseRoute: (route: SelectedRoute) => void
+  // Tilstand 3: valgt tur
+  selected: SelectedRoute | null
+  route: Route | null
+  routeVariants: RouteSummary[]
+  status: 'loading' | 'ready' | 'error' | 'empty'
+  onRetry: () => void
+  onBack: () => void
+  authenticated: boolean
+  onSaveRoute: () => void
+}
+
+/** Ett turkort i lister og søk */
+function RouteItem({
+  group,
+  active,
+  onChoose,
+}: {
+  group: RouteGroup
+  active: boolean
+  onChoose: () => void
+}) {
+  const first = group.variants[0]
+  const meta = [
+    lengthText(group),
+    group.variantCount > 1 ? `${group.variantCount} varianter` : null,
+    first?.difficulty,
+    group.favoriteCount ? `♥ ${group.favoriteCount}` : null,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+  return (
+    <li>
+      <button type="button" className="esp-item" aria-pressed={active} onClick={onChoose}>
+        <span className="esp-item-icon" aria-hidden="true">
+          △
+        </span>
+        <span>
+          <strong>{group.name}</strong>
+          <span className="esp-item-meta">{meta}</span>
+        </span>
+      </button>
+    </li>
+  )
+}
+
+export default function ExploreSearchPanel(props: Props) {
+  const {
+    filters,
+    sort,
+    onSortChange,
+    items,
+    total,
+    listStatus,
+    page,
+    onPageChange,
+    filtered,
+    onShowAll,
+    place,
+    onClearPlace,
+    onChoosePlace,
+    onChooseRoute,
+    selected,
+    route,
+    routeVariants,
+    status,
+    onRetry,
+    onBack,
+    authenticated,
+    onSaveRoute,
+  } = props
+  const inputRef = useRef<HTMLInputElement>(null)
+  const backRef = useRef<HTMLButtonElement>(null)
+
+  // --- Søk med debouncing. Utdaterte forespørsler avbrytes. ---
+  const [input, setInput] = useState('')
+  // Svaret lagres sammen med søket det hører til, så status kan avledes under rendering (som på forsiden)
+  const [searchResult, setSearchResult] = useState<{
+    search: string
+    data: SearchData | null
+  } | null>(null)
+  // Filtrene gjøres om til tekst, så søket bare kjøres på nytt når de faktisk endres
+  const filterKey = JSON.stringify(filterVariables(filters))
+  const debouncedSearch = useDebouncedValue(input.trim(), SEARCH_DELAY_MS)
+  useEffect(() => {
+    const search = debouncedSearch
+    if (search.length < 2) return
+    const controller = new AbortController()
+    graphql<SearchData>(
+      SEARCH_QUERY,
+      { search, limit: 6, ...JSON.parse(filterKey) },
+      controller.signal,
+    )
+      .then((data) => setSearchResult({ search: search + filterKey, data }))
+      .catch(() => {
+        if (!controller.signal.aborted) setSearchResult({ search: search + filterKey, data: null })
+      })
+    return () => controller.abort()
+  }, [debouncedSearch, filterKey])
+  const trimmed = input.trim()
+  const searchStatus =
+    trimmed.length < 2
+      ? 'idle'
+      : searchResult?.search !== trimmed + filterKey
+        ? 'loading'
+        : searchResult.data
+          ? 'ready'
+          : 'error'
+  const hits = searchStatus === 'ready' ? searchResult!.data! : null
+  const placeCount = hits?.searchMunicipalities.length ?? 0
+  const routeTotal = hits?.routes.total ?? 0
+  const hitSummary =
+    [
+      placeCount && `${placeCount} ${placeCount === 1 ? 'sted' : 'steder'}`,
+      routeTotal && `${routeTotal.toLocaleString('nb-NO')} turer`,
+    ]
+      .filter(Boolean)
+      .join(' og ') || 'Ingen steder eller turer passer søket.'
+
+  // Søk går foran valgt tur, så man kan søke videre mens en tur vises
+  const mode = trimmed.length >= 2 ? 'search' : selected ? 'route' : 'list'
+
+  function chooseRoute(item: SelectedRoute) {
+    setInput('')
+    onChooseRoute({ ...item })
+    // Knappen som ble trykket forsvinner, så fokus flyttes til «Tilbake» i turvisningen
+    window.requestAnimationFrame(() => backRef.current?.focus())
+  }
+  function choosePlace(hit: PlaceHit) {
+    setInput('')
+    onChoosePlace(hit)
+    window.requestAnimationFrame(() => inputRef.current?.focus())
+  }
+
+  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const listTitle = place
+    ? `Turer i ${place.name}`
+    : filtered
+      ? 'Turer i kartutsnittet'
+      : 'Turer i hele Norge'
+
+  return (
+    <section className="esp" aria-label="Søk etter turer og steder">
+      <form className="esp-search" role="search" onSubmit={(event) => event.preventDefault()}>
+        <label htmlFor="esp-input" className="visually-hidden">
+          Søk etter tur eller sted
+        </label>
+        <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
+          <circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" strokeWidth="2.5" />
+          <path d="m15.5 15.5 5 5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+        </svg>
+        {place && (
+          <span className="esp-chip">
+            {place.name}
+            <button type="button" aria-label={`Fjern ${place.name}`} onClick={onClearPlace}>
+              ×
+            </button>
+          </span>
+        )}
+        <input
+          ref={inputRef}
+          id="esp-input"
+          type="search"
+          autoComplete="off"
+          maxLength={120}
+          placeholder="Søk etter tur eller sted"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') setInput('')
+          }}
+          aria-describedby="esp-status"
+        />
+      </form>
+
+      <div className="esp-body">
+        {mode === 'search' && (
+          <>
+            <p id="esp-status" role="status" className="esp-meta">
+              {searchStatus === 'loading' && 'Søker …'}
+              {searchStatus === 'error' && 'Søket feilet. Kontroller at backend kjører.'}
+              {hits && hitSummary}
+            </p>
+            {placeCount > 0 && (
+              <>
+                <h3 className="esp-group">Steder</h3>
+                <ul className="esp-list">
+                  {hits!.searchMunicipalities.map((hit) => (
+                    <li key={hit.code}>
+                      <button type="button" className="esp-item" onClick={() => choosePlace(hit)}>
+                        <span className="esp-item-icon" aria-hidden="true">
+                          ⌖
+                        </span>
+                        <span>
+                          <strong>{hit.name}</strong>
+                          <span className="esp-item-meta">
+                            {hit.routeCount.toLocaleString('nb-NO')} turer · Vis i kartet
+                          </span>
+                        </span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {hits && hits.routes.items.length > 0 && (
+              <>
+                <h3 className="esp-group">
+                  Turer
+                  {routeTotal > hits.routes.items.length
+                    ? ` (viser ${hits.routes.items.length} av ${routeTotal.toLocaleString('nb-NO')})`
+                    : ''}
+                </h3>
+                <ul className="esp-list">
+                  {hits.routes.items.map((group) => (
+                    <RouteItem
+                      key={group.key}
+                      group={group}
+                      active={false}
+                      onChoose={() => chooseRoute(group.variants[0])}
+                    />
+                  ))}
+                </ul>
+              </>
+            )}
+          </>
+        )}
+
+        {mode === 'route' && (
+          <>
+            <button
+              ref={backRef}
+              type="button"
+              className="text-button esp-back"
+              onClick={() => {
+                onBack()
+                window.requestAnimationFrame(() => inputRef.current?.focus())
+              }}
+            >
+              ← Tilbake til turene
+            </button>
+            {status === 'loading' && (
+              <p id="esp-status" role="status" className="esp-meta">
+                Henter turen …
+              </p>
+            )}
+            {status === 'error' && (
+              <div role="alert" className="esp-error">
+                <p id="esp-status">Kunne ikke hente turen.</p>
+                <button type="button" onClick={onRetry}>
+                  Prøv igjen
+                </button>
+              </div>
+            )}
+            {status === 'empty' && (
+              <p id="esp-status" className="esp-meta">
+                Denne turen har ingen kartgeometri.
+              </p>
+            )}
+            {status === 'ready' && route && (
+              <RouteDetails
+                route={route}
+                variants={routeVariants}
+                onChooseVariant={onChooseRoute}
+                authenticated={authenticated}
+                onSaveRoute={onSaveRoute}
+              />
+            )}
+          </>
+        )}
+
+        {mode === 'list' && (
+          <>
+            <h2 className="esp-title">{listTitle}</h2>
+            <p id="esp-status" role="status" className="esp-meta">
+              {listStatus === 'loading' && 'Henter turer …'}
+              {listStatus === 'error' && 'Kunne ikke hente turene. Prøv å flytte kartet igjen.'}
+              {listStatus === 'ready' &&
+                (total
+                  ? `${total.toLocaleString('nb-NO')} turer`
+                  : 'Ingen turer her. Flytt eller zoom ut kartet.')}
+              {filtered && (
+                <button type="button" className="text-button" onClick={onShowAll}>
+                  Vis hele Norge
+                </button>
+              )}
+            </p>
+            <label className="esp-sort">
+              Sorter
+              <select
+                value={sort}
+                onChange={(event) => onSortChange(event.target.value as RouteSort)}
+              >
+                {SORT_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            {listStatus === 'ready' && items.length > 0 && (
+              <>
+                <ul className="esp-list">
+                  {items.map((group) => (
+                    <RouteItem
+                      key={group.key}
+                      group={group}
+                      active={group.variants.some(
+                        (item) => selected?.name === item.name && selected?.number === item.number,
+                      )}
+                      onChoose={() => chooseRoute(group.variants[0])}
+                    />
+                  ))}
+                </ul>
+                {pages > 1 && (
+                  <nav className="esp-pager" aria-label="Sider med turer">
+                    <button
+                      type="button"
+                      disabled={page === 0}
+                      onClick={() => onPageChange(page - 1)}
+                    >
+                      ← Forrige
+                    </button>
+                    <span>
+                      Side {page + 1} av {pages.toLocaleString('nb-NO')}
+                    </span>
+                    <button
+                      type="button"
+                      disabled={page + 1 >= pages}
+                      onClick={() => onPageChange(page + 1)}
+                    >
+                      Neste →
+                    </button>
+                  </nav>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/src/features/Explore/RouteDetails.tsx b/src/features/Explore/RouteDetails.tsx
new file mode 100644
index 0000000..ac06b44
--- /dev/null
+++ b/src/features/Explore/RouteDetails.tsx
@@ -0,0 +1,93 @@
+// Informasjon om valgt tur i søkepanelet: navn, varianter, nøkkeltall, beskrivelse og høydeprofil.
+// Selve ruten tegnes i kartet av ExploreMap.
+import ElevationProfile from '../ElevationProfile/ElevationProfile'
+import { formatKm } from '../../lib/format'
+import {
+  variantLabel,
+  type Route,
+  type RouteSummary,
+  type SelectedRoute,
+} from '../../lib/routeTypes'
+
+type Props = {
+  route: Route
+  /** Alle registrerte varianter med samme navn */
+  variants: RouteSummary[]
+  onChooseVariant: (variant: SelectedRoute) => void
+  authenticated: boolean
+  onSaveRoute: () => void
+}
+
+export default function RouteDetails({
+  route,
+  variants,
+  onChooseVariant,
+  authenticated,
+  onSaveRoute,
+}: Props) {
+  const subtitle =
+    route.nameQuality === 'derived'
+      ? variantLabel(route.number)
+      : route.name === 'Bymarka'
+        ? 'Hele stinettet i Bymarka'
+        : `Rutenummer ${route.number}`
+  return (
+    <article className="esp-route" aria-labelledby="esp-route-title">
+      <p id="esp-status" role="status" className="visually-hidden">
+        Viser {route.name} i kartet
+      </p>
+      <p className="esp-eyebrow">FOTTUR</p>
+      <h2 id="esp-route-title">{route.name}</h2>
+      <p className="esp-meta">{subtitle}</p>
+      {variants.length > 1 && (
+        <div className="esp-variant">
+          <label htmlFor="esp-variant">Velg rutevariant ({variants.length})</label>
+          <select
+            id="esp-variant"
+            value={route.id}
+            onChange={(event) => {
+              const variant = variants.find((item) => item.id === event.target.value)
+              if (variant) onChooseVariant({ ...variant })
+            }}
+          >
+            {variants.map((item) => (
+              <option key={item.id} value={item.id}>
+                {variantLabel(item.number)} · {formatKm(item.lengthMeters)} km ·{' '}
+                {item.difficulty || 'Ikke gradert'}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      <div className="esp-stats">
+        <div>
+          <strong>{formatKm(route.lengthMeters)} km</strong>
+          <span>Lengde</span>
+        </div>
+        <div>
+          <strong>{route.difficulty || 'Ikke gradert'}</strong>
+          <span>Vanskelighetsgrad</span>
+        </div>
+        <div>
+          <strong>{route.segmentCount}</strong>
+          <span>{route.connected ? 'Sammenhengende' : 'Adskilte deler'}</span>
+        </div>
+      </div>
+      <p className="esp-description">
+        {route.description || 'Ingen turbeskrivelse er oppgitt i kildedataene.'}
+      </p>
+      {route.maintainer && <p className="esp-meta">Vedlikeholdes av {route.maintainer}</p>}
+      <p className="esp-notice">
+        {route.number === 'SAMLET_RUNDE'
+          ? 'Denne runden er beregnet fra registrerte rutevarianter med samme navn, og er ikke et eget registrert turforslag.'
+          : 'Linjen viser det som er registrert i datasettet. Vi har ikke bekreftet at den dekker hele turen.'}
+      </p>
+      <div className="esp-actions">
+        <button type="button" onClick={onSaveRoute}>
+          {authenticated ? 'Lagre og planlegg' : 'Logg inn for å lagre'}
+        </button>
+      </div>
+      <ElevationProfile geojson={route.geojson} />
+    </article>
+  )
+}
diff --git a/src/features/RouteBuilder/MyRoutes.tsx b/src/features/RouteBuilder/MyRoutes.tsx
new file mode 100644
index 0000000..41d1b82
--- /dev/null
+++ b/src/features/RouteBuilder/MyRoutes.tsx
@@ -0,0 +1,92 @@
+// Det som hører til brukerens egne ruter: skjemaet som lagrer en rute, og lista over lagrede ruter.
+import { formatKm } from '../../lib/format'
+import type { SavedRoute } from './builderApi'
+
+type SaveFormProps = {
+  name: string
+  description: string
+  onNameChange: (name: string) => void
+  onDescriptionChange: (description: string) => void
+  /** Om ruten allerede er lagret og endringer overskriver den */
+  editing: boolean
+  disabled: boolean
+  onSave: () => void
+}
+
+/** Navn og beskrivelse, og knappen som lagrer ruten på profilen. */
+export function SaveRouteForm(props: SaveFormProps) {
+  return (
+    <form
+      className="profile-form"
+      onSubmit={(event) => {
+        event.preventDefault()
+        props.onSave()
+      }}
+    >
+      <label>
+        Rutenavn
+        <input
+          value={props.name}
+          onChange={(event) => props.onNameChange(event.target.value)}
+          required
+          maxLength={100}
+        />
+      </label>
+      <label>
+        Beskrivelse
+        <textarea
+          value={props.description}
+          onChange={(event) => props.onDescriptionChange(event.target.value)}
+          maxLength={2000}
+          rows={3}
+        />
+      </label>
+      <button disabled={props.disabled} type="submit">
+        {props.editing ? 'Lagre endringer' : 'Lagre på profilen'}
+      </button>
+    </form>
+  )
+}
+
+type SavedRoutesProps = {
+  routes: SavedRoute[]
+  busy: boolean
+  onOpen: (route: SavedRoute) => void
+  onDownload: (route: SavedRoute) => void
+  onRemove: (route: SavedRoute) => void
+}
+
+/** Brukerens lagrede ruter, med knapper for å åpne, laste ned som GPX og slette. */
+export function SavedRoutes({ routes, busy, onOpen, onDownload, onRemove }: SavedRoutesProps) {
+  return (
+    <>
+      <h3>Lagrede ruter ({routes.length})</h3>
+      {!routes.length ? (
+        <p>Du har ikke laget noen egne ruter ennå.</p>
+      ) : (
+        <ul className="favorite-list">
+          {routes.map((route) => (
+            <li key={route.id}>
+              <strong>{route.name}</strong>
+              <p>
+                {formatKm(route.lengthMeters, 2)} km · Utgangspunkt: {route.sourceName}
+              </p>
+              <p>{route.description}</p>
+              <div className="trip-actions">
+                <button disabled={busy} onClick={() => onOpen(route)}>
+                  Åpne og rediger
+                </button>
+                <button type="button" onClick={() => onDownload(route)}>
+                  Last ned GPX
+                </button>
+                <button disabled={busy} onClick={() => onRemove(route)}>
+                  Slett rute
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}
diff --git a/src/features/RouteBuilder/PointsEditor.tsx b/src/features/RouteBuilder/PointsEditor.tsx
new file mode 100644
index 0000000..14b86b4
--- /dev/null
+++ b/src/features/RouteBuilder/PointsEditor.tsx
@@ -0,0 +1,103 @@
+import { formatKm } from '../../lib/format'
+import type { Point } from './builderApi'
+
+const MAX_POINTS = 12
+
+type Props = {
+  points: Point[]
+  busy: boolean
+  /** Lengden på den beregnede ruten, hvis den finnes */
+  routeLengthMeters: number | null
+  calculateDisabled: boolean
+  onChangePoints: (update: (old: Point[]) => Point[]) => void
+  onReset: () => void
+  onCalculate: () => void
+}
+
+/** Knapper, koordinatskjema og liste for punktene som ruten beregnes mellom. */
+export default function PointsEditor(props: Props) {
+  const { points, busy, routeLengthMeters, onChangePoints } = props
+  return (
+    <>
+      <div className="builder-controls">
+        <button
+          disabled={busy || !points.length}
+          onClick={() => onChangePoints((old) => old.slice(0, -1))}
+        >
+          Angre siste punkt
+        </button>
+        <button
+          disabled={busy || points.length < 2 || points.length >= MAX_POINTS}
+          onClick={() => onChangePoints((old) => [...old, old[0]])}
+        >
+          Tilbake til start
+        </button>
+        <button disabled={busy} onClick={props.onReset}>
+          Ny rute
+        </button>
+        <button disabled={props.calculateDisabled} onClick={props.onCalculate}>
+          {busy ? 'Vennligst vent …' : 'Beregn rute'}
+        </button>
+      </div>
+      <details className="trip-diary">
+        <summary>Legg til punkt med koordinater</summary>
+        <form
+          className="profile-form"
+          onSubmit={(event) => {
+            event.preventDefault()
+            const data = new FormData(event.currentTarget)
+            onChangePoints((old) => [
+              ...old,
+              { lat: Number(data.get('latitude')), lon: Number(data.get('longitude')) },
+            ])
+          }}
+        >
+          <label>
+            Breddegrad
+            <input
+              name="latitude"
+              type="number"
+              step="any"
+              min="-90"
+              max="90"
+              required
+              placeholder="63.416"
+            />
+          </label>
+          <label>
+            Lengdegrad
+            <input
+              name="longitude"
+              type="number"
+              step="any"
+              min="-180"
+              max="180"
+              required
+              placeholder="10.28"
+            />
+          </label>
+          <button disabled={busy || points.length >= MAX_POINTS}>Legg til punkt</button>
+        </form>
+      </details>
+      <ol className="builder-points">
+        {points.map((p, i) => (
+          <li key={i}>
+            <span>
+              Punkt {i + 1}: {p.lat.toFixed(5)}, {p.lon.toFixed(5)}
+            </span>
+            <button
+              disabled={busy}
+              onClick={() => onChangePoints((old) => old.filter((_, n) => n !== i))}
+            >
+              Fjern punkt
+            </button>
+          </li>
+        ))}
+      </ol>
+      <p>
+        {points.length} av {MAX_POINTS} punkter
+        {routeLengthMeters != null ? ` · ${formatKm(routeLengthMeters, 2)} km` : ''}
+      </p>
+    </>
+  )
+}
diff --git a/src/features/RouteBuilder/RoundTripSuggester.tsx b/src/features/RouteBuilder/RoundTripSuggester.tsx
new file mode 100644
index 0000000..8d02602
--- /dev/null
+++ b/src/features/RouteBuilder/RoundTripSuggester.tsx
@@ -0,0 +1,80 @@
+import { formatKm } from '../../lib/format'
+import type { Proposal, SmartPlan } from './builderApi'
+
+type Props = {
+  desiredKm: string
+  onDesiredKmChange: (value: string) => void
+  proposals: Proposal[]
+  smartPlan: SmartPlan | null
+  busy: boolean
+  /** Om «Foreslå rundtur» ikke kan brukes ennå (ingen stinett eller punkter) */
+  suggestDisabled: boolean
+  onSuggest: () => void
+  onChoose: (proposal: Proposal) => void
+}
+
+/** Foreslår rundturer med ønsket lengde fra det første punktet på kartet. */
+export default function RoundTripSuggester(props: Props) {
+  const { proposals, smartPlan, busy } = props
+  return (
+    <section className="smart-roundtrip">
+      <h4>Foreslå en rundtur</h4>
+      <p>
+        Det første punktet på kartet brukes som start og mål. Du trenger bare ett punkt for å få
+        forslag. Forslagene bruker sløyfer i det valgte stinettet; ønsket lengde er omtrentlig.
+      </p>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          props.onSuggest()
+        }}
+      >
+        <label>
+          Ønsket lengde (km)
+          <input
+            type="number"
+            min="0.5"
+            max="50"
+            step="0.1"
+            required
+            value={props.desiredKm}
+            onChange={(event) => props.onDesiredKmChange(event.target.value)}
+          />
+        </label>
+        <button disabled={busy || props.suggestDisabled}>Foreslå rundtur</button>
+      </form>
+      {proposals.length > 0 && (
+        <ul className="builder-source-results">
+          {proposals.map((proposal, index) => (
+            <li key={proposal.id}>
+              <button
+                disabled={busy}
+                aria-pressed={smartPlan?.proposalId === proposal.id}
+                onClick={() => props.onChoose(proposal)}
+              >
+                <strong>
+                  Forslag {index + 1} · {formatKm(proposal.lengthMeters, 2)} km
+                </strong>
+                <span>
+                  {formatKm(Math.abs(proposal.differenceMeters), 2)} km{' '}
+                  {proposal.differenceMeters >= 0 ? 'lengre' : 'kortere'} enn ønsket
+                </span>
+                <span>
+                  {proposal.connectorMeters > 1
+                    ? `${formatKm(proposal.connectorMeters, 2)} km av turen er til og fra sløyfen langs samme sti.`
+                    : 'Starter direkte på sløyfen.'}
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {smartPlan && (
+        <p>
+          Valgt smart rundtur. Flytter du punktene eller velger «Beregn rute», går du over til
+          manuell rutebygging.
+        </p>
+      )}
+    </section>
+  )
+}
diff --git a/src/features/RouteBuilder/RouteBuilder.css b/src/features/RouteBuilder/RouteBuilder.css
new file mode 100644
index 0000000..fe6e432
--- /dev/null
+++ b/src/features/RouteBuilder/RouteBuilder.css
@@ -0,0 +1,185 @@
+.builder-map {
+  height: 460px;
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+  margin: 18px 0;
+  background: #e4eadb;
+}
+.stop-planner {
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+  margin: 20px 0;
+  padding: 18px;
+}
+.stop-planner select {
+  margin-left: 10px;
+  font: inherit;
+  padding: 8px;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+}
+.stop-list {
+  list-style: none;
+  padding: 0;
+  max-height: 350px;
+  overflow: auto;
+}
+.stop-list li {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  border-bottom: 1px solid #dce1d7;
+  padding: 12px 0;
+}
+.stop-list li > span {
+  flex: 1 1 220px;
+  font-size: 12px;
+  color: #647267;
+}
+.stop-details {
+  background: #f5f6f0;
+  padding: 16px;
+  border-radius: 10px;
+}
+.stop-marker {
+  background: #355fb8;
+  color: white;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  border: 2px solid white;
+  border-radius: 50%;
+  font-size: 18px;
+}
+.stop-marker.chosen {
+  background: #be6426;
+  font-size: 12px;
+}
+.smart-roundtrip {
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+  background: #f5f6f0;
+  padding: 18px;
+  margin: 18px 0;
+}
+.smart-roundtrip h4 {
+  margin: 0;
+}
+.smart-roundtrip form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: 12px;
+}
+.smart-roundtrip label {
+  display: grid;
+  gap: 6px;
+}
+.smart-roundtrip input {
+  font: inherit;
+  padding: 10px;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+}
+.builder-search {
+  display: grid;
+  gap: 8px;
+  font-weight: 600;
+}
+.builder-search input,
+.builder-search select {
+  font: inherit;
+  padding: 12px;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background: white;
+}
+.builder-search-form {
+  display: flex;
+  align-items: end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.builder-search-form label {
+  flex: 1;
+  min-width: 0;
+}
+@media (max-width: 600px) {
+  .builder-search-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+.builder-source-results {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+.builder-source-results button {
+  width: 100%;
+  text-align: left;
+  background: #edf2e9;
+  color: #203b32;
+  border: 2px solid transparent;
+}
+.builder-source-results button[aria-pressed='true'] {
+  border-color: #126b51;
+}
+.builder-source-results span {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+}
+.builder-marker {
+  border: 2px solid white;
+  background: #185b45;
+  color: white;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  cursor: grab;
+}
+.builder-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.builder-points {
+  padding-left: 24px;
+}
+.builder-points li {
+  margin: 8px 0;
+}
+.builder-points button {
+  background: transparent;
+  color: #185b45;
+  padding: 5px 10px;
+  text-decoration: underline;
+}
+.route-builder textarea {
+  font: inherit;
+  padding: 10px;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  resize: vertical;
+}
+@media (max-width: 600px) {
+  .builder-map {
+    height: 340px;
+  }
+  .builder-controls button {
+    flex: 1 1 45%;
+  }
+}
diff --git a/src/features/RouteBuilder/RouteBuilder.tsx b/src/features/RouteBuilder/RouteBuilder.tsx
new file mode 100644
index 0000000..b5f36f6
--- /dev/null
+++ b/src/features/RouteBuilder/RouteBuilder.tsx
@@ -0,0 +1,337 @@
+import { useEffect, useRef, useState } from 'react'
+import { TOKEN_KEY } from '../../lib/graphql'
+import { downloadGpx } from '../../lib/gpx'
+import ElevationProfile from '../ElevationProfile/ElevationProfile'
+import {
+  deleteRoute,
+  fetchNetwork,
+  fetchSavedRoutes,
+  previewRoute,
+  saveRoute,
+  suggestRoundTrips,
+  type Point,
+  type Preview,
+  type Proposal,
+  type SavedRoute,
+  type SmartPlan,
+  type SourceRoute,
+} from './builderApi'
+import PointsEditor from './PointsEditor'
+import RoundTripSuggester from './RoundTripSuggester'
+import { SaveRouteForm, SavedRoutes } from './MyRoutes'
+import SourceSearch from './SourceSearch'
+import StopPlanner, { type RouteStop } from './StopPlanner'
+import { useBuilderMap } from './useBuilderMap'
+import './RouteBuilder.css'
+
+/**
+ * Rutebyggeren: velg et stinett, sett punkter på kartet (eller få forslag til en rundtur),
+ * beregn ruten og lagre den på profilen. Tilstanden ligger her, og delene under viser den.
+ */
+export default function RouteBuilder() {
+  const token = localStorage.getItem(TOKEN_KEY) || ''
+  // Telles opp hver gang utkastet endres, så svar på gamle forespørsler kan ignoreres
+  const revision = useRef(0)
+  const [network, setNetwork] = useState('')
+  const [points, setPoints] = useState<Point[]>([])
+  const [preview, setPreview] = useState<Preview | null>(null)
+  const [routes, setRoutes] = useState<SavedRoute[]>([])
+  const [editing, setEditing] = useState<string | null>(null)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [message, setMessage] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [sourceId, setSourceId] = useState<string | null>(null)
+  const [sourceName, setSourceName] = useState('')
+  const [sourceChosen, setSourceChosen] = useState(false)
+  const [networkLoading, setNetworkLoading] = useState(false)
+  const [networkAttempt, setNetworkAttempt] = useState(0)
+  const [desiredKm, setDesiredKm] = useState('8')
+  const [proposals, setProposals] = useState<Proposal[]>([])
+  const [smartPlan, setSmartPlan] = useState<SmartPlan | null>(null)
+  const smartRef = useRef<SmartPlan | null>(null)
+  const [selectedStops, setSelectedStops] = useState<RouteStop[]>([])
+
+  /** Endrer punktene og nullstiller alt som ble beregnet fra de gamle */
+  function changePoints(update: (old: Point[]) => Point[]) {
+    revision.current++
+    setPoints(update)
+    setPreview(null)
+    setMessage('')
+    setProposals([])
+    setSmartPlan(null)
+    setSelectedStops([])
+  }
+
+  const { container, mapRef, mapReady } = useBuilderMap({
+    network,
+    points,
+    preview,
+    onChangePoints: changePoints,
+    onError: setMessage,
+  })
+
+  useEffect(() => {
+    const controller = new AbortController()
+    fetchSavedRoutes(token, controller.signal)
+      .then(setRoutes)
+      .catch((error) => {
+        if (!controller.signal.aborted) setMessage(error.message)
+      })
+    return () => controller.abort()
+  }, [token])
+
+  useEffect(() => {
+    if (!sourceChosen) return
+    const controller = new AbortController()
+    fetchNetwork(token, sourceId, controller.signal)
+      .then((geojson) => {
+        if (!controller.signal.aborted) {
+          setNetwork(geojson)
+          setNetworkLoading(false)
+        }
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted) {
+          setMessage(error.message)
+          setNetworkLoading(false)
+        }
+      })
+    return () => controller.abort()
+  }, [sourceId, token, sourceChosen, networkAttempt])
+
+  async function calculate() {
+    setSmartPlan(null)
+    setProposals([])
+    setSelectedStops([])
+    setPreview(null)
+    const version = revision.current
+    setBusy(true)
+    setMessage('')
+    try {
+      const result = await previewRoute(token, points, sourceId)
+      if (version === revision.current) {
+        setPreview(result)
+        setPoints(result.waypoints)
+      }
+    } catch (error) {
+      if (version === revision.current)
+        setMessage(error instanceof Error ? error.message : 'Kunne ikke beregne ruten.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function suggest() {
+    if (!points[0]) return
+    const version = revision.current
+    const plan = { start: points[0], desiredLengthMeters: Number(desiredKm) * 1000, proposalId: '' }
+    smartRef.current = plan
+    setBusy(true)
+    setMessage('')
+    setProposals([])
+    try {
+      const result = await suggestRoundTrips(token, plan.start, plan.desiredLengthMeters, sourceId)
+      if (version === revision.current) {
+        setProposals(result)
+        if (!result.length)
+          setMessage(
+            'Fant ingen tilgjengelig sløyfe nær ønsket lengde fra dette startpunktet. Prøv en annen lengde, et annet startpunkt eller et større stinett.',
+          )
+      }
+    } catch (error) {
+      if (version === revision.current)
+        setMessage(error instanceof Error ? error.message : 'Kunne ikke foreslå rundturer.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function changeDesiredKm(value: string) {
+    revision.current++
+    setDesiredKm(value)
+    setProposals([])
+    smartRef.current = null
+  }
+
+  function chooseProposal(proposal: Proposal) {
+    if (!smartRef.current) return
+    revision.current++
+    setPreview(proposal)
+    setPoints(proposal.waypoints)
+    setSelectedStops([])
+    setSmartPlan({ ...smartRef.current, proposalId: proposal.id })
+    setMessage('Rundturen er valgt. Gi den et navn og lagre på profilen.')
+    if (!name) setName(`Rundtur fra ${sourceName}`)
+  }
+
+  async function save() {
+    const version = revision.current
+    setBusy(true)
+    setMessage('')
+    try {
+      const saved = await saveRoute(token, {
+        id: editing,
+        name,
+        description,
+        points,
+        routeId: sourceId,
+        roundTrip: smartPlan,
+        stopIds: selectedStops.map((stop) => stop.id),
+      })
+      setRoutes((old) => [saved, ...old.filter((r) => r.id !== saved.id)])
+      if (version === revision.current) {
+        setEditing(saved.id)
+        setMessage('Ruten er lagret privat på profilen din.')
+      }
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : 'Kunne ikke lagre ruten.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  /** Bytter kilderute, og henter nytt stinett hvis det er en annen enn den som er valgt fra før */
+  function selectSource(id: string | null, sourceLabel: string) {
+    if (!sourceChosen || sourceId !== id) {
+      setNetwork('')
+      setNetworkLoading(true)
+    }
+    setSourceChosen(true)
+    setSourceId(id)
+    setSourceName(sourceLabel)
+  }
+
+  function open(route: SavedRoute) {
+    revision.current++
+    selectSource(route.sourceRouteId, route.sourceName)
+    setEditing(route.id)
+    setName(route.name)
+    setDescription(route.description)
+    setPoints(route.waypoints)
+    setPreview(route)
+    setSelectedStops(route.stops)
+    setSmartPlan(route.smartPlan ? JSON.parse(route.smartPlan) : null)
+    setProposals([])
+    setMessage('')
+  }
+
+  function chooseSource(route: SourceRoute) {
+    if (points.length && !window.confirm('Bytte kilderute og tømme ruteutkastet?')) return
+    reset()
+    selectSource(route.id, route.name)
+  }
+
+  function reset() {
+    changePoints(() => [])
+    setEditing(null)
+    setName('')
+    setDescription('')
+  }
+
+  function download(route: SavedRoute) {
+    try {
+      downloadGpx(route.name, route.description, route.geojson)
+      setMessage(
+        'GPX-filen er laget fra den lagrede ruten. Se etter filen i nettleserens nedlastinger.',
+      )
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : 'Kunne ikke eksportere ruten.')
+    }
+  }
+
+  async function remove(route: SavedRoute) {
+    if (!window.confirm(`Slette «${route.name}» fra Mine ruter?`)) return
+    setBusy(true)
+    try {
+      await deleteRoute(token, route.id)
+      setRoutes((old) => old.filter((r) => r.id !== route.id))
+      if (editing === route.id) reset()
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : 'Kunne ikke slette ruten.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const notReady = busy || networkLoading || !network
+
+  return (
+    <section className="route-builder" aria-labelledby="builder-title">
+      <h3 id="builder-title">Lag din egen rute</h3>
+      <SourceSearch
+        sourceId={sourceId}
+        sourceChosen={sourceChosen}
+        sourceName={sourceName}
+        busy={busy}
+        networkLoading={networkLoading}
+        hasNetwork={Boolean(network)}
+        onChoose={chooseSource}
+        onRetryNetwork={() => {
+          setMessage('')
+          setNetworkLoading(true)
+          setNetworkAttempt((n) => n + 1)
+        }}
+      />
+      <p>
+        Klikk på stinettet for å velge start, stopp og mål. Flytt punktene ved å dra markørene.
+        Ruten følger korteste registrerte forbindelse mellom punktene.
+      </p>
+      <div
+        className="builder-map"
+        ref={container}
+        aria-label={`Kart for rutebygging fra ${sourceName}`}
+      />
+      <p className="stats-help">
+        Grønt: registrerte stier. Oransje: beregnet rute. Nettet kan ha hull og mangler; ruten er et
+        eget forslag, ikke bekreftet navigasjon. Tilbake til start kan følge samme sti.
+      </p>
+      <RoundTripSuggester
+        desiredKm={desiredKm}
+        onDesiredKmChange={changeDesiredKm}
+        proposals={proposals}
+        smartPlan={smartPlan}
+        busy={busy}
+        suggestDisabled={networkLoading || !network || !points.length}
+        onSuggest={() => void suggest()}
+        onChoose={chooseProposal}
+      />
+      <PointsEditor
+        points={points}
+        busy={busy}
+        routeLengthMeters={preview?.lengthMeters ?? null}
+        calculateDisabled={notReady || points.length < 2}
+        onChangePoints={changePoints}
+        onReset={reset}
+        onCalculate={() => void calculate()}
+      />
+      {preview && <ElevationProfile geojson={preview.geojson} />}
+      {preview && (
+        <StopPlanner
+          geojson={preview.geojson}
+          selected={selectedStops}
+          onChange={setSelectedStops}
+          mapRef={mapRef}
+          mapReady={mapReady}
+        />
+      )}
+      <SaveRouteForm
+        name={name}
+        description={description}
+        onNameChange={setName}
+        onDescriptionChange={setDescription}
+        editing={Boolean(editing)}
+        disabled={notReady || !preview}
+        onSave={() => void save()}
+      />
+      {message && <p role="status">{message}</p>}
+      <SavedRoutes
+        routes={routes}
+        busy={busy}
+        onOpen={open}
+        onDownload={download}
+        onRemove={(route) => void remove(route)}
+      />
+    </section>
+  )
+}
diff --git a/src/features/RouteBuilder/SourceSearch.tsx b/src/features/RouteBuilder/SourceSearch.tsx
new file mode 100644
index 0000000..1741771
--- /dev/null
+++ b/src/features/RouteBuilder/SourceSearch.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import { formatKm } from '../../lib/format'
+import { useDebouncedValue } from '../../lib/useDebouncedValue'
+import { searchSourceRoutes, type SourceRoute } from './builderApi'
+
+type Props = {
+  sourceId: string | null
+  sourceChosen: boolean
+  sourceName: string
+  busy: boolean
+  networkLoading: boolean
+  /** Om stinettet er hentet */
+  hasNetwork: boolean
+  onChoose: (route: SourceRoute) => void
+  onRetryNetwork: () => void
+}
+
+/** Søk etter en rute og velg den som utgangspunkt for stinettet. */
+export default function SourceSearch(props: Props) {
+  const { sourceId, sourceChosen, sourceName, busy, networkLoading, hasNetwork } = props
+  const [search, setSearch] = useState('')
+  const [matches, setMatches] = useState<SourceRoute[]>([])
+  const [message, setMessage] = useState('')
+  const [attempt, setAttempt] = useState(0)
+  const debouncedSearch = useDebouncedValue(search.trim(), 300)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    searchSourceRoutes(debouncedSearch, controller.signal)
+      .then(({ matches, groupCount }) => {
+        if (controller.signal.aborted) return
+        setMatches(matches)
+        setMessage(
+          groupCount
+            ? 'Velg utgangspunkt i listen nedenfor. Søk for å finne flere ruter.'
+            : 'Ingen treff. Prøv et annet rutenavn.',
+        )
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted) setMessage(error.message)
+      })
+    return () => controller.abort()
+  }, [debouncedSearch, attempt])
+
+  return (
+    <>
+      <form
+        className="builder-search-form"
+        onSubmit={(event) => {
+          event.preventDefault()
+          setAttempt((old) => old + 1)
+        }}
+      >
+        <label className="builder-search">
+          Finn et stinett eller en rute
+          <input
+            value={search}
+            maxLength={120}
+            onChange={(event) => {
+              setSearch(event.target.value)
+              setMatches([])
+              setMessage('Søker …')
+            }}
+            placeholder="Søk etter et rutenavn, for eksempel Bymarka eller Fløyen"
+          />
+        </label>
+        <button type="submit">Søk etter ruter</button>
+      </form>
+      {message && <p role="status">{message}</p>}
+      {matches.length > 0 && (
+        <label className="builder-search">
+          Velg utgangspunkt
+          <select
+            disabled={busy}
+            value={matches.some((route) => route.id === sourceId) ? sourceId || '' : ''}
+            onChange={(event) => {
+              const route = matches.find((item) => item.id === event.target.value)
+              if (route) props.onChoose(route)
+            }}
+          >
+            <option value="">Velg en rutevariant …</option>
+            {matches.map((route) => (
+              <option key={route.id} value={route.id}>
+                {route.name} · {route.number} · {formatKm(route.lengthMeters, 1)} km
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+      <p>
+        <strong>
+          {sourceChosen
+            ? `Valgt utgangspunkt: ${sourceName}`
+            : 'Ingen rute valgt ennå. Søk og velg et utgangspunkt først.'}
+        </strong>
+        {networkLoading ? ' · Henter stinett …' : ''}
+      </p>
+      {sourceChosen && !networkLoading && !hasNetwork && (
+        <button type="button" onClick={props.onRetryNetwork}>
+          Prøv å hente stinettet igjen
+        </button>
+      )}
+    </>
+  )
+}
diff --git a/src/features/RouteBuilder/StopPlanner.tsx b/src/features/RouteBuilder/StopPlanner.tsx
new file mode 100644
index 0000000..1844fe3
--- /dev/null
+++ b/src/features/RouteBuilder/StopPlanner.tsx
@@ -0,0 +1,267 @@
+import { useEffect, useState, type RefObject } from 'react'
+import * as maplibregl from 'maplibre-gl'
+import { graphql, TOKEN_KEY } from '../../lib/graphql'
+import { formatKm } from '../../lib/format'
+
+export type RouteStop = {
+  id: string
+  name: string | null
+  kind: string
+  lon: number
+  lat: number
+  distanceFromRouteMeters: number
+  distanceFromStartMeters: number
+  operator: string | null
+  openingHours: string | null
+  capacity: string | null
+  fee: string | null
+  website: string | null
+}
+export const stopFields =
+  'id name kind lon lat distanceFromRouteMeters distanceFromStartMeters operator openingHours capacity fee website'
+const categories: Record<string, string> = {
+  alpine_hut: 'Turhytte',
+  wilderness_hut: 'Villmarkshytte',
+  chalet: 'Hytte',
+  shelter: 'Gapahuk / leskur',
+  lean_to: 'Gapahuk',
+  viewpoint: 'Utsiktspunkt',
+  picnic_site: 'Rasteplass',
+  toilets: 'Toalett',
+  drinking_water: 'Drikkevann',
+  parking: 'Parkering',
+  camp_site: 'Campingplass',
+  peak: 'Topp',
+}
+
+export default function StopPlanner({
+  geojson,
+  selected,
+  onChange,
+  mapRef,
+  mapReady,
+}: {
+  geojson: string
+  selected: RouteStop[]
+  onChange: (stops: RouteStop[]) => void
+  mapRef: RefObject<maplibregl.Map | null>
+  mapReady: number
+}) {
+  const [result, setResult] = useState<{
+    geojson: string
+    stops: RouteStop[]
+    truncated: boolean
+  } | null>(null)
+  const [error, setError] = useState<{ geojson: string; text: string } | null>(null)
+  const [kind, setKind] = useState('all')
+  const [focused, setFocused] = useState<string | null>(null)
+  const [attempt, setAttempt] = useState(0)
+  const token = localStorage.getItem(TOKEN_KEY) || ''
+  useEffect(() => {
+    const controller = new AbortController()
+    void graphql<{ routeStops: { stops: RouteStop[]; truncated: boolean } }>(
+      `query($token:String!,$geojson:String!){routeStops(token:$token,geojson:$geojson){truncated stops{${stopFields}}}}`,
+      { token, geojson },
+      AbortSignal.any([controller.signal, AbortSignal.timeout(20000)]),
+    )
+      .then((data) => {
+        if (!controller.signal.aborted) setResult({ geojson, ...data.routeStops })
+      })
+      .catch((err) => {
+        if (!controller.signal.aborted) setError({ geojson, text: err.message })
+      })
+    return () => controller.abort()
+  }, [geojson, token, attempt])
+  const loaded = result?.geojson === geojson
+  const stops = loaded ? result.stops : []
+  const visible = kind === 'all' ? stops : stops.filter((stop) => stop.kind === kind)
+  const selectedIds = new Set(selected.map((stop) => stop.id))
+  const current =
+    stops.find((stop) => stop.id === focused) || selected.find((stop) => stop.id === focused)
+
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapReady || !loaded) return
+    const popups: maplibregl.Popup[] = []
+    const markers = (
+      kind === 'all' ? result.stops : result.stops.filter((stop) => stop.kind === kind)
+    ).map((stop) => {
+      const element = document.createElement('button')
+      element.type = 'button'
+      element.className = `stop-marker${selected.some((s) => s.id === stop.id) ? ' chosen' : ''}`
+      element.textContent = String(selected.findIndex((s) => s.id === stop.id) + 1 || '•')
+      element.setAttribute('aria-label', `${stop.name || categories[stop.kind]} – vis stopp`)
+      element.addEventListener('click', (event) => {
+        event.stopPropagation()
+        setFocused(stop.id)
+        const content = document.createElement('div')
+        content.textContent = `${stop.name || categories[stop.kind]} · ${Math.round(stop.distanceFromRouteMeters)} m fra ruten`
+        popups.push(
+          new maplibregl.Popup().setLngLat([stop.lon, stop.lat]).setDOMContent(content).addTo(map),
+        )
+      })
+      return new maplibregl.Marker({ element }).setLngLat([stop.lon, stop.lat]).addTo(map)
+    })
+    return () => {
+      markers.forEach((marker) => marker.remove())
+      popups.forEach((popup) => popup.remove())
+    }
+  }, [mapRef, mapReady, result, loaded, kind, selected])
+
+  function toggle(stop: RouteStop) {
+    onChange(
+      (selectedIds.has(stop.id)
+        ? selected.filter((s) => s.id !== stop.id)
+        : [...selected, stop]
+      ).sort((a, b) => a.distanceFromStartMeters - b.distanceFromStartMeters),
+    )
+  }
+  return (
+    <section className="stop-planner" aria-labelledby="stops-heading">
+      <h4 id="stops-heading">Stopp langs turen</h4>
+      <p>
+        Steder innen 500 meter fra ruten. Avstanden er i luftlinje til kartlinjen; stedet er ikke
+        bekreftet tilgjengelig fra stien. Et stopp endrer ikke ruten eller lengden.
+      </p>
+      <label>
+        Kategori
+        <select value={kind} onChange={(event) => setKind(event.target.value)}>
+          <option value="all">Alle steder</option>
+          {Object.entries(categories).map(([key, label]) => (
+            <option key={key} value={key}>
+              {label}
+            </option>
+          ))}
+        </select>
+      </label>
+      {error?.geojson === geojson ? (
+        <p role="alert">
+          {error.text}{' '}
+          <button
+            type="button"
+            onClick={() => {
+              setError(null)
+              setAttempt((n) => n + 1)
+            }}
+          >
+            Prøv igjen
+          </button>
+        </p>
+      ) : !loaded ? (
+        <p role="status">Henter steder fra lokale OSM-data …</p>
+      ) : (
+        <p role="status">
+          {visible.length} steder i denne kategorien
+          {result.truncated ? ' · Utvalget er begrenset til de 200 nærmeste stedene.' : ''}
+        </p>
+      )}
+      {loaded && !visible.length && <p>Ingen registrerte steder i denne kategorien nær ruten.</p>}
+      <ul className="stop-list">
+        {visible.map((stop) => (
+          <li key={stop.id}>
+            <button
+              className="text-button"
+              onClick={() => {
+                setFocused(stop.id)
+                mapRef.current?.easeTo({
+                  center: [stop.lon, stop.lat],
+                  zoom: Math.max(mapRef.current.getZoom(), 13),
+                })
+              }}
+            >
+              {stop.name || categories[stop.kind]}
+            </button>
+            <span>
+              {categories[stop.kind]} · {Math.round(stop.distanceFromRouteMeters)} m fra ruten ·
+              cirka {formatKm(stop.distanceFromStartMeters, 1)} km fra start
+            </span>
+            <button
+              disabled={!selectedIds.has(stop.id) && selected.length >= 20}
+              aria-pressed={selectedIds.has(stop.id)}
+              onClick={() => toggle(stop)}
+            >
+              {selectedIds.has(stop.id) ? 'Fjern stopp' : 'Legg til stopp'}
+            </button>
+          </li>
+        ))}
+      </ul>
+      {current && (
+        <div className="stop-details">
+          <h4>{current.name || categories[current.kind]}</h4>
+          <p>{categories[current.kind]}</p>
+          <dl>
+            {current.operator && (
+              <div>
+                <dt>Operatør</dt>
+                <dd>{current.operator}</dd>
+              </div>
+            )}
+            {current.openingHours && (
+              <div>
+                <dt>Registrerte åpningstider</dt>
+                <dd>{current.openingHours}</dd>
+              </div>
+            )}
+            {current.capacity && (
+              <div>
+                <dt>Registrert kapasitet</dt>
+                <dd>{current.capacity}</dd>
+              </div>
+            )}
+            {current.fee && (
+              <div>
+                <dt>Registrert avgift</dt>
+                <dd>{current.fee}</dd>
+              </div>
+            )}
+          </dl>
+          <p>
+            <a
+              href={`https://www.openstreetmap.org/${current.id.startsWith('n/') ? 'node' : 'way'}/${current.id.split('/')[1]}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Se stedet på OpenStreetMap
+            </a>
+            {current.website && (
+              <>
+                {' '}
+                ·{' '}
+                <a href={current.website} target="_blank" rel="noreferrer">
+                  Stedets nettside
+                </a>
+              </>
+            )}
+          </p>
+          <p>
+            Opplysningene kan være mangelfulle eller utdaterte. Kontroller åpning, adgang og
+            eventuell bestilling før turen.
+          </p>
+        </div>
+      )}
+      <h4>Planlagte stopp ({selected.length}/20)</h4>
+      {!selected.length ? (
+        <p>Velg stopp fra listen eller se opplysninger ved å trykke på kartmarkørene.</p>
+      ) : (
+        <ol>
+          {selected.map((stop) => (
+            <li key={stop.id}>
+              {stop.name || categories[stop.kind]} · cirka{' '}
+              {formatKm(stop.distanceFromStartMeters, 1)} km fra start{' '}
+              <button
+                className="text-button"
+                onClick={() => onChange(selected.filter((s) => s.id !== stop.id))}
+              >
+                Fjern
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
+      <p className="stats-help">
+        Lagres når du trykker «Lagre på profilen» eller «Lagre endringer». Rekkefølgen viser
+        omtrentlig første passering langs kartlinjen. © OpenStreetMap-bidragsytere, ODbL.
+      </p>
+    </section>
+  )
+}
diff --git a/src/features/RouteBuilder/builderApi.ts b/src/features/RouteBuilder/builderApi.ts
new file mode 100644
index 0000000..a53f757
--- /dev/null
+++ b/src/features/RouteBuilder/builderApi.ts
@@ -0,0 +1,91 @@
+// Typene og alle GraphQL-kallene til rutebyggeren samlet, så komponentene slipper spørringstekst.
+import { graphql } from '../../lib/graphql'
+import { stopFields, type RouteStop } from './StopPlanner'
+
+export type Point = { lon: number; lat: number }
+export type Preview = { geojson: string; lengthMeters: number; waypoints: Point[] }
+/** Rundturen brukeren har valgt, så den kan lagres sammen med ruten */
+export type SmartPlan = { start: Point; desiredLengthMeters: number; proposalId: string }
+export type Proposal = Preview & { id: string; connectorMeters: number; differenceMeters: number }
+export type SavedRoute = Preview & {
+  id: string
+  name: string
+  description: string
+  updatedAt: string
+  sourceRouteId: string | null
+  sourceName: string
+  smartPlan: string | null
+  stops: RouteStop[]
+}
+/** En rute fra Kartverket som stinettet hentes fra */
+export type SourceRoute = { id: string; name: string; number: string; lengthMeters: number }
+
+export const SAVED_ROUTE_FIELDS = `id name description geojson lengthMeters waypoints{lon lat} updatedAt sourceRouteId sourceName smartPlan stops{${stopFields}}`
+
+/** Beregning og lagring kan ta tid på store stinett */
+const SLOW_REQUEST_MS = 30000
+
+export const fetchSavedRoutes = (token: string, signal: AbortSignal) =>
+  graphql<{ myCustomRoutes: SavedRoute[] }>(
+    `query($token:String!){myCustomRoutes(token:$token){${SAVED_ROUTE_FIELDS}}}`,
+    { token },
+    signal,
+  ).then((data) => data.myCustomRoutes)
+
+/** Stinettet rundt en kilderute som GeoJSON-tekst */
+export const fetchNetwork = (token: string, routeId: string | null, signal: AbortSignal) =>
+  graphql<{ builderNetwork: string }>(
+    'query($token:String!,$routeId:ID){builderNetwork(token:$token,routeId:$routeId)}',
+    { token, routeId },
+    signal,
+  ).then((data) => data.builderNetwork)
+
+/** Ruter som kan brukes som utgangspunkt, med antall rutegrupper som ga treff */
+export const searchSourceRoutes = (search: string, signal: AbortSignal) =>
+  graphql<{ routes: { items: { variants: SourceRoute[] }[] } }>(
+    'query($search:String!){routes(search:$search,limit:12){items{variants{id name number lengthMeters}}}}',
+    { search },
+    signal,
+  ).then((data) => ({
+    matches: data.routes.items.flatMap((group) => group.variants),
+    groupCount: data.routes.items.length,
+  }))
+
+export const previewRoute = (token: string, points: Point[], routeId: string | null) =>
+  graphql<{ previewCustomRoute: Preview }>(
+    'query($token:String!,$points:[BuilderPointInput!]!,$routeId:ID){previewCustomRoute(token:$token,points:$points,routeId:$routeId){geojson lengthMeters waypoints{lon lat}}}',
+    { token, points, routeId },
+    AbortSignal.timeout(SLOW_REQUEST_MS),
+  ).then((data) => data.previewCustomRoute)
+
+export const suggestRoundTrips = (
+  token: string,
+  start: Point,
+  desiredLengthMeters: number,
+  routeId: string | null,
+) =>
+  graphql<{ suggestRoundTrips: Proposal[] }>(
+    'query($token:String!,$start:BuilderPointInput!,$desiredLengthMeters:Float!,$routeId:ID){suggestRoundTrips(token:$token,start:$start,desiredLengthMeters:$desiredLengthMeters,routeId:$routeId){id geojson lengthMeters connectorMeters differenceMeters waypoints{lon lat}}}',
+    { token, start, desiredLengthMeters, routeId },
+    AbortSignal.timeout(SLOW_REQUEST_MS),
+  ).then((data) => data.suggestRoundTrips)
+
+export type SaveRouteInput = {
+  id: string | null
+  name: string
+  description: string
+  points: Point[]
+  routeId: string | null
+  roundTrip: SmartPlan | null
+  stopIds: string[]
+}
+
+export const saveRoute = (token: string, input: SaveRouteInput) =>
+  graphql<{ saveCustomRoute: SavedRoute }>(
+    `mutation($token:String!,$id:ID,$name:String!,$description:String!,$points:[BuilderPointInput!]!,$routeId:ID,$roundTrip:RoundTripInput,$stopIds:[ID!]){saveCustomRoute(token:$token,id:$id,name:$name,description:$description,points:$points,routeId:$routeId,roundTrip:$roundTrip,stopIds:$stopIds){${SAVED_ROUTE_FIELDS}}}`,
+    { token, ...input },
+    AbortSignal.timeout(SLOW_REQUEST_MS),
+  ).then((data) => data.saveCustomRoute)
+
+export const deleteRoute = (token: string, id: string) =>
+  graphql('mutation($token:String!,$id:ID!){deleteCustomRoute(token:$token,id:$id)}', { token, id })
diff --git a/src/features/RouteBuilder/useBuilderMap.ts b/src/features/RouteBuilder/useBuilderMap.ts
new file mode 100644
index 0000000..22fd71e
--- /dev/null
+++ b/src/features/RouteBuilder/useBuilderMap.ts
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react'
+import * as maplibregl from 'maplibre-gl'
+import type { GeoJSONSource } from 'maplibre-gl'
+import type { Geometry } from 'geojson'
+import type { Point, Preview } from './builderApi'
+
+type Options = {
+  /** Stinettet som GeoJSON-tekst. Kartet åpnes først når det finnes. */
+  network: string
+  points: Point[]
+  preview: Preview | null
+  /** Kalles når brukeren klikker i kartet eller drar et punkt */
+  onChangePoints: (update: (old: Point[]) => Point[]) => void
+  onError: (message: string) => void
+}
+
+const MAX_POINTS = 12
+
+/**
+ * Kartet i rutebyggeren: viser stinettet, den beregnede ruten og punktene (som kan dras),
+ * og melder fra når brukeren legger til eller flytter punkter.
+ */
+export function useBuilderMap({ network, points, preview, onChangePoints, onError }: Options) {
+  const container = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<maplibregl.Map | null>(null)
+  const [mapReady, setMapReady] = useState(0)
+  // Kartets hendelser lever lenger enn én render, så de leser siste verdier herfra
+  const pointsRef = useRef<Point[]>([])
+  const handlers = useRef({ onChangePoints, onError })
+  useEffect(() => {
+    pointsRef.current = points
+    handlers.current = { onChangePoints, onError }
+  })
+
+  useEffect(() => {
+    if (!network || !container.current) return
+    let map: maplibregl.Map
+    try {
+      const coordinates = (JSON.parse(network) as { coordinates: number[][][] }).coordinates.flat()
+      const bounds = coordinates.reduce(
+        (b, p) => b.extend([p[0], p[1]]),
+        new maplibregl.LngLatBounds(),
+      )
+      map = new maplibregl.Map({
+        container: container.current,
+        bounds,
+        fitBoundsOptions: { padding: 45, maxZoom: 15 },
+        style: {
+          version: 8,
+          sources: {
+            osm: {
+              type: 'raster',
+              tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+              tileSize: 256,
+              attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            },
+          },
+          layers: [{ id: 'background', type: 'raster', source: 'osm' }],
+        },
+      })
+      mapRef.current = map
+      map.addControl(new maplibregl.NavigationControl())
+      map.on('load', () => {
+        map.addSource('network', {
+          type: 'geojson',
+          data: { type: 'Feature', properties: {}, geometry: JSON.parse(network) },
+        })
+        map.addLayer({
+          id: 'network-line',
+          type: 'line',
+          source: 'network',
+          paint: { 'line-color': '#477866', 'line-width': 3, 'line-opacity': 0.65 },
+        })
+        map.addSource('draft', {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] },
+        })
+        map.addLayer({
+          id: 'draft-outline',
+          type: 'line',
+          source: 'draft',
+          paint: { 'line-color': 'white', 'line-width': 9 },
+        })
+        map.addLayer({
+          id: 'draft-line',
+          type: 'line',
+          source: 'draft',
+          paint: { 'line-color': '#be6426', 'line-width': 5 },
+        })
+        setMapReady((old) => old + 1)
+      })
+      map.on('click', (event) => {
+        if (pointsRef.current.length >= MAX_POINTS) return
+        handlers.current.onChangePoints((old) =>
+          old.length >= MAX_POINTS
+            ? old
+            : [...old, { lon: event.lngLat.lng, lat: event.lngLat.lat }],
+        )
+      })
+    } catch {
+      // Kartbiblioteket kunne ikke starte, for eksempel uten WebGL.
+      handlers.current.onError('Kartet kunne ikke åpnes. Prøv en nettleser med støtte for WebGL.')
+      return
+    }
+    return () => {
+      map.remove()
+      mapRef.current = null
+    }
+  }, [network])
+
+  useEffect(() => {
+    if (!mapReady || !mapRef.current) return
+    const map = mapRef.current
+    const source = map.getSource('draft') as GeoJSONSource
+    if (!source) return
+    source.setData(
+      preview
+        ? { type: 'Feature', properties: {}, geometry: JSON.parse(preview.geojson) as Geometry }
+        : { type: 'FeatureCollection', features: [] },
+    )
+    const markers = points.map((point, index) => {
+      const label = document.createElement('div')
+      label.className = 'builder-marker'
+      label.textContent = String(index + 1)
+      label.addEventListener('click', (event) => event.stopPropagation())
+      const marker = new maplibregl.Marker({ element: label, draggable: true })
+        .setLngLat([point.lon, point.lat])
+        .addTo(map)
+      marker.on('dragend', () => {
+        const pos = marker.getLngLat()
+        handlers.current.onChangePoints((old) =>
+          old.map((p, i) => (i === index ? { lon: pos.lng, lat: pos.lat } : p)),
+        )
+      })
+      return marker
+    })
+    return () => markers.forEach((marker) => marker.remove())
+  }, [points, preview, mapReady, network])
+
+  return { container, mapRef, mapReady }
+}
diff --git a/src/gpx.ts b/src/gpx.ts
deleted file mode 100644
index b4ea947..0000000
--- a/src/gpx.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-function xml(value: string): string {
-  return Array.from(value).filter(character => {
-    const code = character.codePointAt(0) || 0
-    return code === 9 || code === 10 || code === 13 || (code >= 32 && code <= 0xd7ff) ||
-      (code >= 0xe000 && code <= 0xfffd) || (code >= 0x10000 && code <= 0x10ffff)
-  }).join('')
-    .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;').replaceAll("'", '&apos;')
-}
-
-/** Export the saved path as a GPX track, preserving order and repeated points. */
-export function buildGpx(name: string, description: string, geojson: string): string {
-  const geometry = JSON.parse(geojson) as { type?: string; coordinates?: unknown }
-  if (!geometry || geometry.type !== 'LineString' || !Array.isArray(geometry.coordinates) || geometry.coordinates.length < 2) {
-    throw new Error('Ruten mangler en gyldig kartlinje og kan ikke eksporteres.')
-  }
-  const trackPoints = geometry.coordinates.map((point: unknown) => {
-    if (!Array.isArray(point) || point.length < 2 || typeof point[0] !== 'number' || typeof point[1] !== 'number' ||
-        !Number.isFinite(point[0]) || !Number.isFinite(point[1]) || Math.abs(point[0]) > 180 || Math.abs(point[1]) > 90) {
-      throw new Error('Ruten inneholder ugyldige koordinater og kan ikke eksporteres.')
-    }
-    const [lon, lat] = point
-    return `      <trkpt lat="${lat}" lon="${lon}" />`
-  }).join('\n')
-  const note = [description.trim(), 'Eget ruteforslag fra Norwegian Explorer, basert på registrerte stier. Ikke bekreftet navigasjon.'].filter(Boolean).join('\n')
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<gpx version="1.1" creator="Norwegian Explorer" xmlns="http://www.topografix.com/GPX/1/1">
-  <metadata>
-    <name>${xml(name)}</name>
-    <desc>${xml(note)}</desc>
-  </metadata>
-  <trk>
-    <name>${xml(name)}</name>
-    <desc>${xml(note)}</desc>
-    <trkseg>
-${trackPoints}
-    </trkseg>
-  </trk>
-</gpx>
-`
-}
-
-export function gpxFilename(name: string): string {
-  const stem = name.trim().replace(/[^\p{L}\p{N}_-]+/gu, '-').replace(/^-+|-+$/g, '').slice(0, 80)
-  return `${stem || 'min-rute'}.gpx`
-}
diff --git a/src/graphql.ts b/src/graphql.ts
deleted file mode 100644
index 7e1afb4..0000000
--- a/src/graphql.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Felles hjelpefunksjon for å sende en GraphQL-spørring til backend.
-// Vite sender /graphql videre til backend på port 4000 (se vite.config.ts).
-type GraphQLResponse<T> = { data?: T; errors?: { message: string }[] }
-
-export async function graphql<T>(query: string, variables: Record<string, unknown> = {}, signal?: AbortSignal): Promise<T> {
-  const response = await fetch('/graphql', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ query, variables }),
-    signal: signal ? AbortSignal.any([signal,AbortSignal.timeout(60000)]) : AbortSignal.timeout(60000),
-  })
-  // Feil i spørringen kommer som JSON med «errors», også når statuskoden ikke er 200
-  const result = await response.json().catch(() => null) as GraphQLResponse<T> | null
-  if (result?.errors) throw new Error(result.errors[0].message)
-  if (!response.ok) throw new Error(`Serveren svarte ${response.status}. Kjører backend?`)
-  if (!result?.data) throw new Error('Tomt svar fra serveren')
-  return result.data
-}
-
-// Nøkkelen innloggingstokenet lagres under i localStorage (brukes av Profile.tsx og Home.tsx)
-export const TOKEN_KEY = 'norwegian-explorer-session'
diff --git a/src/index.css b/src/index.css
index 113ea41..c970e9c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,60 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
-:root{font-family:'DM Sans',system-ui,sans-serif;color:#203b32;background:#f5f6f0;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0}a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #c27730;outline-offset:5px}button{background:#185b45;color:white;border:0;border-radius:8px;padding:12px 20px}p{line-height:1.65}h1,h2,h3{line-height:1.15} 
+:root {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  color: #203b32;
+  background: #f5f6f0;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+a {
+  color: inherit;
+}
+button {
+  font: inherit;
+  cursor: pointer;
+}
+button:focus-visible,
+a:focus-visible {
+  outline: 3px solid #c27730;
+  outline-offset: 5px;
+}
+button {
+  background: #185b45;
+  color: white;
+  border: 0;
+  border-radius: 8px;
+  padding: 12px 20px;
+}
+p {
+  line-height: 1.65;
+}
+h1,
+h2,
+h3 {
+  line-height: 1.15;
+}
 
 /* Keep map controls separate from application button styling. */
-.maplibregl-popup .maplibregl-popup-content{padding:14px 36px 14px 14px;overflow-wrap:anywhere}
-.maplibregl-popup .maplibregl-popup-close-button{width:28px;height:28px;padding:0;border-radius:0 3px 0 0;background:transparent;color:#203b32;font-size:22px;line-height:28px}
-.maplibregl-popup .maplibregl-popup-close-button:hover{background:#edf2e9}
+.maplibregl-popup .maplibregl-popup-content {
+  padding: 14px 36px 14px 14px;
+  overflow-wrap: anywhere;
+}
+.maplibregl-popup .maplibregl-popup-close-button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 0 3px 0 0;
+  background: transparent;
+  color: #203b32;
+  font-size: 22px;
+  line-height: 28px;
+}
+.maplibregl-popup .maplibregl-popup-close-button:hover {
+  background: #edf2e9;
+}
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..4383854
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,5 @@
+// Felles formatering av tall som vises til brukeren, på norsk (komma som desimaltegn).
+
+/** Meter til kilometer, uten enhet. Antall desimaler kan økes der det er viktig, f.eks. på korte turer. */
+export const formatKm = (meters: number, maximumFractionDigits = 1) =>
+  (meters / 1000).toLocaleString('nb-NO', { maximumFractionDigits })
diff --git a/src/lib/gpx.ts b/src/lib/gpx.ts
new file mode 100644
index 0000000..ae0d9c7
--- /dev/null
+++ b/src/lib/gpx.ts
@@ -0,0 +1,96 @@
+function xml(value: string): string {
+  return Array.from(value)
+    .filter((character) => {
+      const code = character.codePointAt(0) || 0
+      return (
+        code === 9 ||
+        code === 10 ||
+        code === 13 ||
+        (code >= 32 && code <= 0xd7ff) ||
+        (code >= 0xe000 && code <= 0xfffd) ||
+        (code >= 0x10000 && code <= 0x10ffff)
+      )
+    })
+    .join('')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+}
+
+/** Export the saved path as a GPX track, preserving order and repeated points. */
+export function buildGpx(name: string, description: string, geojson: string): string {
+  const geometry = JSON.parse(geojson) as { type?: string; coordinates?: unknown }
+  if (
+    !geometry ||
+    geometry.type !== 'LineString' ||
+    !Array.isArray(geometry.coordinates) ||
+    geometry.coordinates.length < 2
+  ) {
+    throw new Error('Ruten mangler en gyldig kartlinje og kan ikke eksporteres.')
+  }
+  const trackPoints = geometry.coordinates
+    .map((point: unknown) => {
+      if (
+        !Array.isArray(point) ||
+        point.length < 2 ||
+        typeof point[0] !== 'number' ||
+        typeof point[1] !== 'number' ||
+        !Number.isFinite(point[0]) ||
+        !Number.isFinite(point[1]) ||
+        Math.abs(point[0]) > 180 ||
+        Math.abs(point[1]) > 90
+      ) {
+        throw new Error('Ruten inneholder ugyldige koordinater og kan ikke eksporteres.')
+      }
+      const [lon, lat] = point
+      return `      <trkpt lat="${lat}" lon="${lon}" />`
+    })
+    .join('\n')
+  const note = [
+    description.trim(),
+    'Eget ruteforslag fra Norwegian Explorer, basert på registrerte stier. Ikke bekreftet navigasjon.',
+  ]
+    .filter(Boolean)
+    .join('\n')
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<gpx version="1.1" creator="Norwegian Explorer" xmlns="http://www.topografix.com/GPX/1/1">
+  <metadata>
+    <name>${xml(name)}</name>
+    <desc>${xml(note)}</desc>
+  </metadata>
+  <trk>
+    <name>${xml(name)}</name>
+    <desc>${xml(note)}</desc>
+    <trkseg>
+${trackPoints}
+    </trkseg>
+  </trk>
+</gpx>
+`
+}
+
+export function gpxFilename(name: string): string {
+  const stem = name
+    .trim()
+    .replace(/[^\p{L}\p{N}_-]+/gu, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80)
+  return `${stem || 'min-rute'}.gpx`
+}
+
+/** Laster ned ruten som GPX-fil i nettleseren. Kaster en feil hvis ruten ikke kan gjøres om til GPX. */
+export function downloadGpx(name: string, note: string, geojson: string) {
+  const content = buildGpx(name, note, geojson)
+  const url = URL.createObjectURL(
+    new Blob([content], { type: 'application/gpx+xml;charset=utf-8' }),
+  )
+  const link = document.createElement('a')
+  link.href = url
+  link.download = gpxFilename(name)
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
diff --git a/src/lib/graphql.ts b/src/lib/graphql.ts
new file mode 100644
index 0000000..94e03ca
--- /dev/null
+++ b/src/lib/graphql.ts
@@ -0,0 +1,46 @@
+// Felles hjelpefunksjon for å sende en GraphQL-spørring til backend.
+// Vite sender /graphql videre til backend på port 4000 (se vite.config.ts). På VM-en ligger appen
+// under /project2/, og Apache sender /project2/graphql videre til backend (se deploy/).
+type GraphQLResponse<T> = { data?: T; errors?: { message: string }[] }
+
+export async function graphql<T>(
+  query: string,
+  variables: Record<string, unknown> = {},
+  signal?: AbortSignal,
+): Promise<T> {
+  const response = await fetch(`${import.meta.env.BASE_URL}graphql`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, variables }),
+    signal: signal
+      ? AbortSignal.any([signal, AbortSignal.timeout(60000)])
+      : AbortSignal.timeout(60000),
+  })
+  // Feil i spørringen kommer som JSON med «errors», også når statuskoden ikke er 200
+  const result = (await response.json().catch(() => null)) as GraphQLResponse<T> | null
+  if (result?.errors) throw new Error(result.errors[0].message)
+  if (!response.ok) throw new Error(`Serveren svarte ${response.status}. Kjører backend?`)
+  if (!result?.data) throw new Error('Tomt svar fra serveren')
+  return result.data
+}
+
+// Nøkkelen innloggingstokenet lagres under i localStorage (brukes av Profile.tsx og Home.tsx)
+export const TOKEN_KEY = 'norwegian-explorer-session'
+
+/**
+ * Sjekker om tokenet i localStorage hører til en innlogget bruker, og fjerner det hvis ikke.
+ * Gir true/false, eller null hvis tokenet ble byttet mens vi ventet (da skal svaret ignoreres).
+ * Brukes av App.tsx, Fjellomrade.tsx og Profile.tsx.
+ */
+export async function checkSession(signal?: AbortSignal): Promise<boolean | null> {
+  const token = localStorage.getItem(TOKEN_KEY)
+  if (!token) return false
+  const data = await graphql<{ me: { username: string } | null }>(
+    'query($token:String!){me(token:$token){username}}',
+    { token },
+    signal,
+  )
+  if (localStorage.getItem(TOKEN_KEY) !== token) return null
+  if (!data.me) localStorage.removeItem(TOKEN_KEY)
+  return Boolean(data.me)
+}
diff --git a/src/mountainAreas.ts b/src/lib/mountainAreas.ts
similarity index 100%
rename from src/mountainAreas.ts
rename to src/lib/mountainAreas.ts
diff --git a/src/lib/placeCategories.ts b/src/lib/placeCategories.ts
new file mode 100644
index 0000000..fd72fef
--- /dev/null
+++ b/src/lib/placeCategories.ts
@@ -0,0 +1,11 @@
+export const placeCategories = [
+  { value: 'hut', label: 'Hytte', kinds: ['alpine_hut', 'wilderness_hut', 'chalet'] },
+  { value: 'shelter', label: 'Gapahuk / leskur', kinds: ['shelter', 'lean_to'] },
+  { value: 'viewpoint', label: 'Utsiktspunkt', kinds: ['viewpoint'] },
+  { value: 'picnic_site', label: 'Rasteplass', kinds: ['picnic_site'] },
+  { value: 'toilets', label: 'Toalett', kinds: ['toilets'] },
+  { value: 'drinking_water', label: 'Drikkevann', kinds: ['drinking_water'] },
+  { value: 'parking', label: 'Parkering', kinds: ['parking'] },
+  { value: 'camp_site', label: 'Campingplass', kinds: ['camp_site'] },
+  { value: 'peak', label: 'Topp', kinds: ['peak'] },
+]
diff --git a/src/lib/routeSearch.ts b/src/lib/routeSearch.ts
new file mode 100644
index 0000000..1634679
--- /dev/null
+++ b/src/lib/routeSearch.ts
@@ -0,0 +1,24 @@
+// Spørringer og typer for å søke etter turer og steder. Brukes av både forsiden og Utforsk-siden,
+// så de to viser og henter det samme.
+import type { RouteGroup } from './routeTypes'
+
+/** En kommune fra søket. bbox er [vest, sør, øst, nord], brukt til å fly kartet dit. */
+export type PlaceHit = { code: string; name: string; routeCount: number; bbox: number[] | null }
+
+/** Svaret fra routes-spørringen: en side med turer gruppert på navn */
+export type RoutePage = { routes: { total: number; items: RouteGroup[] } }
+
+/** Feltene i en turgruppe, så alle lister får samme form */
+export const ROUTE_GROUP_FIELDS = `key name variantCount minLengthMeters maxLengthMeters favoriteCount
+  variants{id name number lengthMeters difficulty routeType duplicateCount variantCount}`
+
+export type SearchData = RoutePage & { searchMunicipalities: PlaceHit[] }
+
+// Turforslagene kan følge filtrene i filterraden (Utforsk), men stedene gjør ikke det:
+// en kommune skal man finne uansett. Uten filter-variabler gir spørringen alle turer.
+export const SEARCH_QUERY = `query($search:String!,$limit:Int!,$difficulty:[String!],$routeType:[String!],$facility:[String!],$minLength:Float,$maxLength:Float){
+  routes(search:$search,limit:$limit,difficulty:$difficulty,routeType:$routeType,facility:$facility,minLength:$minLength,maxLength:$maxLength){
+    total items{ ${ROUTE_GROUP_FIELDS} }
+  }
+  searchMunicipalities(query:$search,limit:4){ code name routeCount bbox }
+}`
diff --git a/src/Explore/routeTypes.ts b/src/lib/routeTypes.ts
similarity index 67%
rename from src/Explore/routeTypes.ts
rename to src/lib/routeTypes.ts
index 3cebe80..7651376 100644
--- a/src/Explore/routeTypes.ts
+++ b/src/lib/routeTypes.ts
@@ -1,16 +1,44 @@
 // Felles typer og hjelpefunksjoner for turer. Brukes av Utforsk-siden (Explore.tsx),
 // søkepanelet i kartet (ExploreSearchPanel.tsx) og App.tsx.
+import { formatKm } from './format'
 
 /** En tur slik route-spørringen returnerer den, med geometri */
 export type Route = {
-  id: string; name: string; number: string; lengthMeters: number; segmentCount: number
-  connected: boolean; maintainer: string | null; difficulty: string | null
-  routeType: string | null; nameQuality: string; duplicateCount: number; variantCount: number
-  description: string | null; geojson: string
+  id: string
+  name: string
+  number: string
+  lengthMeters: number
+  segmentCount: number
+  connected: boolean
+  maintainer: string | null
+  difficulty: string | null
+  routeType: string | null
+  nameQuality: string
+  duplicateCount: number
+  variantCount: number
+  description: string | null
+  geojson: string
+}
+export type RouteSummary = {
+  id: string
+  name: string
+  number: string
+  lengthMeters: number
+  difficulty: string | null
+  routeType: string | null
+  duplicateCount: number
+  variantCount: number
 }
-export type RouteSummary = { id: string; name: string; number: string; lengthMeters: number; difficulty: string | null; routeType: string | null; duplicateCount: number; variantCount: number }
 /** Turer med samme navn samles i én gruppe i lister og søk */
-export type RouteGroup = { key: string; name: string; variantCount: number; minLengthMeters: number; maxLengthMeters: number; favoriteCount?: number; variants: RouteSummary[] }
+export type RouteGroup = {
+  key: string
+  name: string
+  variantCount: number
+  minLengthMeters: number
+  maxLengthMeters: number
+  favoriteCount?: number
+  variants: RouteSummary[]
+}
 /** Antall turer per side i lista */
 export const PAGE_SIZE = 12
 
@@ -28,14 +56,11 @@ export function variantLabel(number: string) {
   return `Nr. ${number}`
 }
 
-/** Meter til kilometer med én desimal, norsk format */
-export const km = (meters: number) => (meters / 1000).toLocaleString('nb-NO', { maximumFractionDigits: 1 })
-
 /** «5,8 km», eller «3,2–7,5 km» når variantene har ulik lengde */
-export function lengthText(group: RouteGroup) {
+export function lengthText(group: Pick<RouteGroup, 'minLengthMeters' | 'maxLengthMeters'>) {
   return group.minLengthMeters === group.maxLengthMeters
-    ? `${km(group.minLengthMeters)} km`
-    : `${km(group.minLengthMeters)}–${km(group.maxLengthMeters)} km`
+    ? `${formatKm(group.minLengthMeters)} km`
+    : `${formatKm(group.minLengthMeters)}–${formatKm(group.maxLengthMeters)} km`
 }
 
 /** Filtrene i filterraden over kartet. Tomme lister / null betyr «ikke filtrert». */
@@ -48,7 +73,13 @@ export type RouteFilterValue = {
   minLength: number | null
   maxLength: number | null
 }
-export const EMPTY_FILTERS: RouteFilterValue = { difficulties: [], routeTypes: [], facilities: [], minLength: null, maxLength: null }
+export const EMPTY_FILTERS: RouteFilterValue = {
+  difficulties: [],
+  routeTypes: [],
+  facilities: [],
+  minLength: null,
+  maxLength: null,
+}
 
 /** Variablene filtrene gir i routes-spørringen */
 export function filterVariables(filters: RouteFilterValue) {
diff --git a/src/lib/useAuthenticated.ts b/src/lib/useAuthenticated.ts
new file mode 100644
index 0000000..f9330cc
--- /dev/null
+++ b/src/lib/useAuthenticated.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+import { checkSession } from './graphql'
+
+/**
+ * Om brukeren er innlogget. Sjekkes når siden åpnes og på nytt når fanen får fokus eller innloggingen
+ * endres i en annen fane, så siden følger med på inn- og utlogging.
+ */
+export function useAuthenticated() {
+  const [authenticated, setAuthenticated] = useState(false)
+  useEffect(() => {
+    let controller: AbortController | undefined
+    const refreshSession = () => {
+      controller?.abort()
+      const current = new AbortController()
+      controller = current
+      checkSession(current.signal)
+        .then((valid) => {
+          if (valid !== null && !current.signal.aborted) setAuthenticated(valid)
+        })
+        .catch(() => {
+          if (!current.signal.aborted) setAuthenticated(false)
+        })
+    }
+    refreshSession()
+    window.addEventListener('storage', refreshSession)
+    window.addEventListener('focus', refreshSession)
+    return () => {
+      controller?.abort()
+      window.removeEventListener('storage', refreshSession)
+      window.removeEventListener('focus', refreshSession)
+    }
+  }, [])
+  return authenticated
+}
diff --git a/src/lib/useDebouncedValue.ts b/src/lib/useDebouncedValue.ts
new file mode 100644
index 0000000..bc79fff
--- /dev/null
+++ b/src/lib/useDebouncedValue.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Gir tilbake `value` først når den har stått uendret i `delayMs`. Brukes på søkefelt, så vi ikke
+ * sender en forespørsel for hvert tastetrykk.
+ */
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value)
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(timer)
+  }, [value, delayMs])
+  return debounced
+}
diff --git a/src/pages/Fjellomrade/AreaMap.tsx b/src/pages/Fjellomrade/AreaMap.tsx
new file mode 100644
index 0000000..570c8d9
--- /dev/null
+++ b/src/pages/Fjellomrade/AreaMap.tsx
@@ -0,0 +1,228 @@
+import { useEffect, useRef, useState } from 'react'
+import * as maplibregl from 'maplibre-gl'
+import type { GeoJSONSource, SymbolLayerSpecification } from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
+import type { MountainArea } from '../../lib/mountainAreas.ts'
+import { boundaryOf, COLOR_BY_KIND, MAP_STYLE, maskAround, pointsToGeoJson } from './mapData.ts'
+import { ALL_KINDS, describe, KINDS, type PoiKind, type PointOfInterest } from './data.ts'
+
+maplibregl.setWorkerUrl(workerUrl)
+
+// Tegner kartikonet for en type: farget sirkel med hvit kant og hvitt symbol. Tegnes dobbelt så stort
+// som det vises (pixelRatio 2 i addImage), så det blir skarpt på skjermer med høy oppløsning.
+function drawIcon(kind: PoiKind) {
+  const size = 48
+  const ctx = document.createElement('canvas').getContext('2d')!
+  ctx.canvas.width = ctx.canvas.height = size
+  ctx.beginPath()
+  ctx.arc(size / 2, size / 2, size / 2 - 3, 0, Math.PI * 2)
+  ctx.fillStyle = KINDS[kind].color
+  ctx.fill()
+  ctx.lineWidth = 4
+  ctx.strokeStyle = '#fff'
+  ctx.stroke()
+  // Symbolet: skaler 24 × 24-rutenettet ned til midten av sirkelen
+  ctx.setTransform(1.4, 0, 0, 1.4, 7, 7)
+  ctx.lineWidth = 2
+  ctx.lineCap = ctx.lineJoin = 'round'
+  ctx.stroke(new Path2D(KINDS[kind].icon))
+  return ctx.getImageData(0, 0, size, size)
+}
+
+// Innholdet i boksen som vises når musepekeren er over et punkt.
+// textContent (ikke innerHTML) fordi navnene kommer fra OpenStreetMap og ikke er til å stole på.
+function hoverContent(p: PointOfInterest) {
+  const box = document.createElement('div')
+  const title = document.createElement('strong')
+  title.textContent = p.name ?? 'Uten navn'
+  const details = document.createElement('small')
+  details.textContent = `${KINDS[p.kind].one} · ${describe(p)}`
+  box.append(title, details)
+  return box
+}
+
+type MapProps = {
+  area: MountainArea
+  points: PointOfInterest[]
+  selected: PointOfInterest | null
+  panelOpen: boolean
+  onSelect: (id: string) => void
+}
+
+// Kartverkets kart over hele skjermen, zoomet inn på området. Området er svakt farget, og kartet utenfor har et tynt slør.
+export default function AreaMap({ area, points, selected, panelOpen, onSelect }: MapProps) {
+  const container = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<maplibregl.Map | null>(null)
+  const [loaded, setLoaded] = useState(false)
+  const [satellite, setSatellite] = useState(false)
+  // Klikk og hover i kartet bruker alltid siste versjon av onSelect og punktene, uten at kartet må lages på nytt
+  const onSelectRef = useRef(onSelect)
+  const pointsRef = useRef(points)
+  useEffect(() => {
+    onSelectRef.current = onSelect
+    pointsRef.current = points
+  })
+
+  // 1. Lag kartet én gang per område
+  useEffect(() => {
+    if (!container.current) return
+    const [west, south, east, north] = area.bbox
+    const map = new maplibregl.Map({
+      container: container.current,
+      style: MAP_STYLE,
+      bounds: [
+        [west, south],
+        [east, north],
+      ],
+    })
+    map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
+    mapRef.current = map
+
+    map.on('load', () => {
+      map.addSource('area', {
+        type: 'geojson',
+        data: { type: 'Feature', properties: {}, geometry: boundaryOf(area) },
+      })
+      map.addLayer({
+        id: 'area-fill',
+        type: 'fill',
+        source: 'area',
+        paint: { 'fill-color': '#c27730', 'fill-opacity': 0.08 },
+      })
+      // Sløret er så svakt at kartet og punktene utenfor fortsatt er lette å lese
+      map.addSource('mask', { type: 'geojson', data: maskAround(area) })
+      map.addLayer({
+        id: 'mask',
+        type: 'fill',
+        source: 'mask',
+        paint: { 'fill-color': '#7d8a80', 'fill-opacity': 0.15 },
+      })
+      map.addLayer({
+        id: 'area-line',
+        type: 'line',
+        source: 'area',
+        paint: { 'line-color': '#c27730', 'line-width': 2.5, 'line-dasharray': [3, 2] },
+      })
+
+      map.addSource('pois', { type: 'geojson', data: pointsToGeoJson([]) })
+      // Ring rundt det valgte punktet. Filteret settes når et punkt velges.
+      map.addLayer({
+        id: 'pois-selected',
+        type: 'circle',
+        source: 'pois',
+        filter: ['==', ['get', 'id'], ''],
+        paint: { 'circle-radius': 16, 'circle-color': COLOR_BY_KIND, 'circle-opacity': 0.25 },
+      })
+      // Ett ikon per type (poi-HUT, poi-CABIN …), som vokser litt når man zoomer inn.
+      // Punktene utenfor grensen er mindre og halvt gjennomsiktige.
+      for (const kind of ALL_KINDS) map.addImage(`poi-${kind}`, drawIcon(kind), { pixelRatio: 2 })
+      const icon: SymbolLayerSpecification['layout'] = {
+        'icon-image': ['concat', 'poi-', ['get', 'kind']],
+        'icon-size': [
+          'interpolate',
+          ['linear'],
+          ['zoom'],
+          8,
+          ['case', ['get', 'inside'], 0.7, 0.55],
+          13,
+          ['case', ['get', 'inside'], 1.1, 0.85],
+        ],
+      }
+      const paint: SymbolLayerSpecification['paint'] = {
+        'icon-opacity': ['case', ['get', 'inside'], 1, 0.5],
+      }
+      // Toppene får ikke ligge oppå hverandre. De høyeste plasseres først, så når man zoomer ut,
+      // vises bare de høyeste toppene, og flere kommer til når man zoomer inn.
+      map.addLayer({
+        id: 'pois-peaks',
+        type: 'symbol',
+        source: 'pois',
+        filter: ['==', ['get', 'kind'], 'PEAK'],
+        paint,
+        layout: { ...icon, 'symbol-sort-key': ['-', ['coalesce', ['get', 'elevation'], 0]] },
+      })
+      // Hytter, buer og gapahuker vises alltid, også når de ligger tett
+      map.addLayer({
+        id: 'pois',
+        type: 'symbol',
+        source: 'pois',
+        filter: ['!=', ['get', 'kind'], 'PEAK'],
+        paint,
+        layout: { ...icon, 'icon-allow-overlap': true },
+      })
+      const poiLayers = ['pois', 'pois-peaks']
+      // Kartet mister tomme verdier i egenskapene, så vi slår opp punktet på id i stedet
+      map.on('click', poiLayers, (event) =>
+        onSelectRef.current(String(event.features?.[0]?.properties.id)),
+      )
+      // Vis navnet på punktet musepekeren er over
+      const hover = new maplibregl.Popup({
+        closeButton: false,
+        closeOnClick: false,
+        offset: 12,
+        className: 'fo-hover',
+      })
+      map.on('mousemove', poiLayers, (event) => {
+        const point = pointsRef.current.find(
+          (p) => p.id === String(event.features?.[0]?.properties.id),
+        )
+        if (!point) return
+        map.getCanvas().style.cursor = 'pointer'
+        hover.setLngLat([point.lon, point.lat]).setDOMContent(hoverContent(point)).addTo(map)
+      })
+      map.on('mouseleave', poiLayers, () => {
+        map.getCanvas().style.cursor = ''
+        hover.remove()
+      })
+      setLoaded(true)
+    })
+
+    return () => {
+      mapRef.current = null
+      map.remove()
+    }
+  }, [area])
+
+  // 2. Vis hele området, med plass til panelet på venstre side når det er åpent
+  useEffect(() => {
+    const [west, south, east, north] = area.bbox
+    const left = panelOpen && window.innerWidth > 760 ? 460 : 60
+    mapRef.current?.fitBounds(
+      [
+        [west, south],
+        [east, north],
+      ],
+      { padding: { top: 60, bottom: 60, right: 60, left }, duration: 800 },
+    )
+  }, [area, panelOpen])
+
+  // 3. Tegn punktene, marker det valgte punktet og fly dit
+  useEffect(() => {
+    if (loaded)
+      (mapRef.current?.getSource('pois') as GeoJSONSource).setData(pointsToGeoJson(points))
+  }, [points, loaded])
+
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !loaded) return
+    map.setFilter('pois-selected', ['==', ['get', 'id'], selected?.id ?? ''])
+    if (selected)
+      map.flyTo({ center: [selected.lon, selected.lat], zoom: Math.max(map.getZoom(), 12) })
+  }, [selected, loaded])
+
+  // Bytt mellom Kartverkets kart og flyfoto ved å vise eller skjule flyfotolaget
+  const toggleSatellite = () => {
+    mapRef.current?.setLayoutProperty('satellitt', 'visibility', satellite ? 'none' : 'visible')
+    setSatellite(!satellite)
+  }
+
+  return (
+    <>
+      <div ref={container} className="fo-map" />
+      <button type="button" className="fo-basemap-btn" onClick={toggleSatellite} disabled={!loaded}>
+        {satellite ? 'Vis kart' : 'Vis flyfoto'}
+      </button>
+    </>
+  )
+}
diff --git a/src/pages/Fjellomrade/AreaView.tsx b/src/pages/Fjellomrade/AreaView.tsx
new file mode 100644
index 0000000..8ce0c08
--- /dev/null
+++ b/src/pages/Fjellomrade/AreaView.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useState } from 'react'
+import type { MountainArea } from '../../lib/mountainAreas.ts'
+import AreaMap from './AreaMap.tsx'
+import {
+  ALL_KINDS,
+  countOf,
+  describe,
+  fetchPoints,
+  KINDS,
+  REGIONS,
+  regionOf,
+  type PoiKind,
+  type PointOfInterest,
+} from './data.ts'
+
+// Ett område: kartet over hele skjermen, med et panel oppå som kan felles sammen
+export default function AreaView({
+  area,
+  pointId,
+}: {
+  area: MountainArea
+  pointId: string | null
+}) {
+  const [points, setPoints] = useState<PointOfInterest[] | null>(null)
+  const [error, setError] = useState('')
+  const [tab, setTab] = useState<PoiKind>('HUT')
+  const [selected, setSelected] = useState<PointOfInterest | null>(null)
+  const [panelOpen, setPanelOpen] = useState(true)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    fetchPoints(area.id, controller.signal)
+      .then((points) => {
+        setPoints(points)
+        // Kom man fra et søketreff, velges punktet og fanen for typen dets
+        const fromSearch = points.find((p) => p.id === pointId)
+        if (fromSearch) {
+          setSelected(fromSearch)
+          setTab(fromSearch.kind)
+        }
+      })
+      .catch((e: unknown) => {
+        if (!controller.signal.aborted) setError(e instanceof Error ? e.message : 'Noe gikk galt')
+      })
+    return () => controller.abort()
+  }, [area, pointId])
+
+  // Toppene sorteres etter høyde, resten etter antall sengeplasser
+  const rows = (points ?? [])
+    .filter((p) => p.kind === tab && p.inside)
+    .sort((a, b) =>
+      tab === 'PEAK'
+        ? (b.elevation ?? 0) - (a.elevation ?? 0)
+        : (b.capacity ?? 0) - (a.capacity ?? 0),
+    )
+
+  return (
+    <main id="main" className="fo-mapview">
+      <AreaMap
+        area={area}
+        points={points ?? []}
+        selected={selected}
+        panelOpen={panelOpen}
+        onSelect={(id) => setSelected(points?.find((p) => p.id === id) ?? null)}
+      />
+
+      <aside className={`fo-panel ${panelOpen ? '' : 'is-closed'}`}>
+        <header className="fo-panel-head">
+          <a href="#/" className="fo-back">
+            ← Alle fjellområder
+          </a>
+          <button
+            type="button"
+            className="fo-collapse"
+            onClick={() => setPanelOpen((o) => !o)}
+            aria-expanded={panelOpen}
+            aria-label={panelOpen ? 'Skjul panelet' : 'Vis panelet'}
+          >
+            <span aria-hidden="true">⌃</span>
+          </button>
+        </header>
+        <div className="fo-panel-body">
+          <p className="fo-kicker">{REGIONS[regionOf(area)]} · Fjellområde</p>
+          <h1 className="fo-title">{area.name}</h1>
+          {area.description && <p className="fo-desc">{area.description}</p>}
+
+          <div className="fo-stats">
+            {ALL_KINDS.map((k) => (
+              <div key={k} style={{ borderTopColor: KINDS[k].color }}>
+                <strong>{countOf(area, k)}</strong>
+                <span>{KINDS[k].short}</span>
+              </div>
+            ))}
+          </div>
+
+          {area.highestPeak && (
+            <div className="fo-peak">
+              <div>
+                <span className="fo-kicker">Høyeste topp</span>
+                <strong>{area.highestPeak.name}</strong>
+              </div>
+              <span className="fo-peak-elev">
+                {area.highestPeak.elevation}
+                <small> moh.</small>
+              </span>
+            </div>
+          )}
+
+          <div className="fo-tabs">
+            {ALL_KINDS.map((k) => (
+              <button key={k} type="button" aria-pressed={tab === k} onClick={() => setTab(k)}>
+                {KINDS[k].short} <span>{countOf(area, k)}</span>
+              </button>
+            ))}
+          </div>
+          {error && (
+            <p className="fo-error" role="alert">
+              Fikk ikke hentet punktene: {error}
+            </p>
+          )}
+          {!points && !error && <p className="fo-note">Henter punkter …</p>}
+          <ol className="fo-rows">
+            {rows.map((p) => (
+              <li key={p.id}>
+                <button
+                  type="button"
+                  aria-pressed={selected?.id === p.id}
+                  onClick={() => setSelected(p)}
+                >
+                  <span className="fo-dot" style={{ background: KINDS[p.kind].color }} />
+                  <span className="fo-row-text">
+                    <strong>{p.name ?? 'Uten navn'}</strong>
+                    <small>{describe(p)}</small>
+                  </span>
+                  <span aria-hidden="true">→</span>
+                </button>
+              </li>
+            ))}
+          </ol>
+          {points && rows.length === 0 && (
+            <p className="fo-note">Ingen registrert i dette området.</p>
+          )}
+        </div>
+      </aside>
+
+      {selected && (
+        <div className="fo-selected">
+          <span className="fo-dot" style={{ background: KINDS[selected.kind].color }} />
+          <div>
+            <span className="fo-kicker">{KINDS[selected.kind].one}</span>
+            <strong>{selected.name ?? 'Uten navn'}</strong>
+            <small>{describe(selected)}</small>
+          </div>
+          <button type="button" onClick={() => setSelected(null)} aria-label="Lukk">
+            ✕
+          </button>
+        </div>
+      )}
+    </main>
+  )
+}
diff --git a/src/pages/Fjellomrade/Fjellomrade.css b/src/pages/Fjellomrade/Fjellomrade.css
new file mode 100644
index 0000000..bcd1272
--- /dev/null
+++ b/src/pages/Fjellomrade/Fjellomrade.css
@@ -0,0 +1,650 @@
+/* Fargene er de samme som i resten av appen (index.css og App.css) */
+:root {
+  --bg: #f5f6f0;
+  --text: #203b32;
+  --muted: #647267;
+  --line: #dce1d7;
+  --soft: #edf2e9;
+  --green: #126b51;
+  --copper: #c27730;
+  /* Skrifttyper som allerede finnes på maskinen, så ingenting må lastes ned */
+  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
+  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --shadow: 0 12px 36px -14px rgba(35, 58, 48, 0.45);
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+.fo-page *,
+.fo-mapview * {
+  box-sizing: border-box;
+}
+.fo-page a,
+.fo-mapview a {
+  color: inherit;
+  text-decoration: none;
+}
+.fo-page button,
+.fo-page input,
+.fo-mapview button {
+  font: inherit;
+  color: inherit;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+.fo-kicker {
+  display: block;
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--copper);
+}
+.fo-note {
+  margin: 10px 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+.fo-error {
+  margin: 0 0 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #f4f0e4;
+  font-size: 14px;
+}
+.fo-dot {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+/* ── Oversikten ── */
+.fo-page {
+  --gutter: clamp(16px, 4vw, 56px);
+}
+.fo-top-bar {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 18px var(--gutter);
+  border-bottom: 1px solid var(--line);
+  font-size: 14px;
+  color: var(--muted);
+}
+.fo-brand {
+  margin-right: auto;
+  font-family: var(--serif);
+  font-size: 24px;
+  color: var(--text) !important;
+}
+/* Samme grønne knapp som «Min profil» på hovedsiden (App.css) */
+.fo-profile-link {
+  padding: 9px 14px;
+  border-radius: 20px;
+  background: var(--green);
+  color: #fff !important;
+  font-size: 12px;
+  font-weight: 700;
+}
+.fo-profile-link:hover {
+  background: #0d4f3b;
+}
+.fo-top-bar .is-on {
+  color: var(--green);
+  font-weight: 600;
+  border-bottom: 2px solid var(--copper);
+  padding-bottom: 4px;
+}
+.fo-hero {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: clamp(20px, 2.5vw, 36px) var(--gutter) 28px;
+}
+.fo-hero h1 {
+  margin: 0;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(56px, 9vw, 132px);
+  letter-spacing: -0.035em;
+  line-height: 0.95;
+}
+.fo-hero p {
+  max-width: 36em;
+  margin: 24px 0 0;
+  font-size: clamp(16px, 1.3vw, 19px);
+  line-height: 1.6;
+  color: var(--muted);
+}
+.fo-filters {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 var(--gutter) 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  align-items: center;
+  justify-content: space-between;
+}
+.fo-filters .fo-search input {
+  width: 260px;
+  margin: 0;
+}
+.fo-messages {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 var(--gutter);
+}
+/* Søketreff blant hytter og topper, over kortene */
+.fo-hits {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 var(--gutter) 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+  gap: 8px;
+}
+.fo-hits a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+  color: inherit;
+  text-decoration: none;
+}
+.fo-hits a:hover {
+  border-color: var(--green);
+}
+.fo-grid {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 var(--gutter) 48px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
+  gap: clamp(14px, 1.6vw, 24px);
+}
+.fo-grid .fo-card {
+  padding: 0;
+  gap: 0;
+  background: #fff;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow: 0 20px 50px -34px rgba(35, 58, 48, 0.25);
+  transition:
+    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.45s,
+    border-color 0.3s;
+}
+.fo-grid .fo-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 34px 70px -30px rgba(18, 107, 81, 0.4);
+}
+.fo-card-map {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  background: #e3ebdf;
+  overflow: hidden;
+}
+.fo-card-map img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.fo-card:hover .fo-card-map img {
+  transform: scale(1.06);
+}
+.fo-card-map span {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  padding: 5px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  font-weight: 600;
+}
+.fo-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  padding: 20px 22px 22px;
+}
+.fo-card-body h3 {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(28px, 2.4vw, 36px);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+.fo-card-body h3 span {
+  color: var(--green);
+  font-size: 20px;
+}
+.fo-card-body > p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--muted);
+}
+.fo-card-body .fo-counts {
+  margin-top: auto;
+}
+
+/* ── Ett område: kartet fyller hele skjermen, og alt annet ligger oppå ── */
+.fo-mapview {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+}
+.fo-map {
+  position: absolute;
+  inset: 0;
+}
+
+/* ── Panelet til venstre ── */
+.fo-panel {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  bottom: 12px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: min(420px, calc(100% - 24px));
+  border-radius: 22px;
+  background: #fff;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+/* Sammenfelt panel: bare toppen vises, og pila snus */
+.fo-panel.is-closed {
+  bottom: auto;
+}
+.fo-panel.is-closed .fo-panel-body {
+  display: none;
+}
+.fo-panel.is-closed .fo-collapse span {
+  transform: rotate(180deg);
+}
+
+.fo-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 16px 12px 22px;
+  border-bottom: 1px solid var(--line);
+}
+.fo-panel-head h1 {
+  margin: 0;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 26px;
+  letter-spacing: -0.01em;
+}
+.fo-back {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--muted) !important;
+}
+.fo-back:hover {
+  color: var(--green) !important;
+}
+.fo-collapse {
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--soft);
+  cursor: pointer;
+}
+.fo-collapse:hover {
+  background: var(--line);
+}
+.fo-collapse span {
+  display: inline-block;
+  font-size: 18px;
+  line-height: 1;
+  transition: transform 0.3s;
+}
+.fo-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 22px 22px;
+  scrollbar-width: thin;
+}
+
+.fo-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.fo-chips button {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+}
+.fo-chips button:hover {
+  border-color: var(--green);
+}
+.fo-chips button[aria-pressed='true'] {
+  background: var(--green);
+  border-color: var(--green);
+  color: #fff;
+}
+.fo-search input {
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--soft);
+  font-size: 14px;
+}
+.fo-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+}
+.fo-card:hover {
+  border-color: var(--green);
+}
+.fo-counts {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  margin: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.fo-counts div {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.fo-counts dd {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: 20px;
+  line-height: 1;
+}
+.fo-counts dt {
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--muted);
+}
+.fo-top {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+.fo-top strong {
+  color: var(--text);
+  font-weight: 600;
+}
+.fo-top span {
+  color: var(--copper);
+  font-weight: 600;
+}
+
+/* ── Ett område ── */
+.fo-title {
+  margin: 0;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(38px, 4vw, 52px);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+.fo-desc {
+  margin: 12px 0 18px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+.fo-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.fo-stats div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 10px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  border-top: 2px solid;
+  background: var(--bg);
+}
+.fo-stats strong {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 1;
+}
+.fo-stats span {
+  font-size: 11px;
+  color: var(--muted);
+}
+.fo-peak {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(194, 119, 48, 0.45);
+  background: linear-gradient(135deg, rgba(194, 119, 48, 0.12), rgba(194, 119, 48, 0.02));
+}
+.fo-peak .fo-kicker {
+  margin: 0;
+}
+.fo-peak strong {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 20px;
+}
+.fo-peak-elev {
+  font-family: var(--serif);
+  font-size: 24px;
+  color: var(--green);
+  white-space: nowrap;
+}
+.fo-peak-elev small {
+  font-family: var(--sans);
+  font-size: 12px;
+  color: var(--muted);
+}
+.fo-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--soft);
+}
+.fo-tabs button {
+  flex: 1;
+  min-height: 34px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+}
+.fo-tabs button span {
+  opacity: 0.6;
+  font-weight: 500;
+}
+.fo-tabs button[aria-pressed='true'] {
+  background: #fff;
+  color: var(--text);
+  box-shadow: 0 1px 4px rgba(35, 58, 48, 0.18);
+}
+.fo-rows {
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.fo-rows li {
+  border-bottom: 1px solid var(--line);
+}
+.fo-rows button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 6px;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+.fo-rows button:hover,
+.fo-rows button[aria-pressed='true'] {
+  background: var(--soft);
+}
+.fo-rows button > span:last-child {
+  color: var(--green);
+}
+.fo-row-text {
+  flex: 1;
+  min-width: 0;
+}
+.fo-row-text strong {
+  display: block;
+  font-size: 14px;
+}
+.fo-row-text small {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* ── Knapper og boks oppå kartet ── */
+.fo-basemap-btn,
+.fo-selected {
+  position: absolute;
+  z-index: 1;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: var(--shadow);
+}
+.fo-basemap-btn {
+  top: 12px;
+  right: 12px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+}
+.fo-basemap-btn:hover {
+  border-color: var(--green);
+}
+.fo-selected {
+  right: 12px;
+  bottom: 40px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: min(340px, calc(100% - 24px));
+  padding: 14px 18px;
+  border-radius: 18px;
+}
+.fo-selected > div {
+  flex: 1;
+}
+.fo-selected .fo-kicker {
+  margin: 0;
+}
+.fo-selected strong {
+  display: block;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 1.1;
+}
+.fo-selected small {
+  font-size: 13px;
+  color: var(--muted);
+}
+.fo-selected button {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--line);
+  background: var(--bg);
+  cursor: pointer;
+}
+
+/* Boksen som vises når musepekeren er over et punkt */
+.fo-hover {
+  pointer-events: none;
+}
+.fo-hover .maplibregl-popup-content {
+  padding: 8px 12px;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  font-family: var(--sans);
+}
+.fo-hover strong {
+  display: block;
+  font-size: 14px;
+  color: var(--text);
+}
+.fo-hover small {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* På mobil ligger panelet øverst og tar halve skjermen, så kartet synes under */
+@media (max-width: 760px) {
+  .fo-filters .fo-search,
+  .fo-filters .fo-search input {
+    width: 100%;
+  }
+  .fo-panel {
+    bottom: auto;
+    max-height: 55dvh;
+  }
+  .fo-basemap-btn {
+    top: auto;
+    bottom: 40px;
+    left: 12px;
+    right: auto;
+  }
+  .fo-selected {
+    left: 12px;
+    width: auto;
+    bottom: 92px;
+  }
+}
diff --git a/src/pages/Fjellomrade/Fjellomrade.tsx b/src/pages/Fjellomrade/Fjellomrade.tsx
new file mode 100644
index 0000000..6da31dd
--- /dev/null
+++ b/src/pages/Fjellomrade/Fjellomrade.tsx
@@ -0,0 +1,56 @@
+// Fjellområdesiden (fjellomrade.html): først en oversikt med ett kort per fjellområde. Klikker man på et kort,
+// åpnes kartet over hele skjermen med et panel oppå, som viser hyttene, buene, gapahukene og toppene i området.
+// Områdene kommer fra silver.mountain_areas og punktene fra silver.osm_points_of_interest.
+// Valgt område står i adressen (#/jotunheimen), så tilbakeknappen og delte lenker virker.
+// Et søketreff legger også til punktet (#/jotunheimen/n/791106132), så kartet åpnes med punktet valgt.
+import { useEffect, useRef, useState } from 'react'
+import { fetchMountainAreas, type MountainArea } from '../../lib/mountainAreas.ts'
+import { useAuthenticated } from '../../lib/useAuthenticated'
+import AreaView from './AreaView.tsx'
+import Overview from './Overview.tsx'
+import './Fjellomrade.css'
+
+// #/jotunheimen gir området, og #/jotunheimen/n/791106132 gir også punktet som skal velges
+function readHash() {
+  const [areaId, ...point] = decodeURIComponent(window.location.hash.replace(/^#\/?/, '')).split(
+    '/',
+  )
+  return { areaId: areaId || null, pointId: point.join('/') || null }
+}
+
+export default function Fjellomrade() {
+  const authenticated = useAuthenticated()
+  const [areas, setAreas] = useState<MountainArea[] | null>(null)
+  const [error, setError] = useState('')
+  const [route, setRoute] = useState(readHash)
+  // Hvor langt ned på oversikten man var, så man kommer tilbake til samme sted fra kartet
+  const overviewScroll = useRef(0)
+
+  useEffect(() => {
+    fetchMountainAreas()
+      .then(setAreas)
+      .catch((e: unknown) => setError(e instanceof Error ? e.message : 'Noe gikk galt'))
+    const onHashChange = () => setRoute(readHash())
+    window.addEventListener('hashchange', onHashChange)
+    return () => window.removeEventListener('hashchange', onHashChange)
+  }, [])
+
+  const area = areas?.find((a) => a.id === route.areaId) ?? null
+
+  useEffect(() => {
+    if (!area) window.scrollTo(0, overviewScroll.current)
+  }, [area])
+
+  if (area) return <AreaView key={area.id} area={area} pointId={route.pointId} />
+  return (
+    <Overview
+      authenticated={authenticated}
+      areas={areas}
+      error={error}
+      notFound={areas && route.areaId ? route.areaId : null}
+      onOpen={() => {
+        overviewScroll.current = window.scrollY
+      }}
+    />
+  )
+}
diff --git a/src/pages/Fjellomrade/Overview.tsx b/src/pages/Fjellomrade/Overview.tsx
new file mode 100644
index 0000000..db81577
--- /dev/null
+++ b/src/pages/Fjellomrade/Overview.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useState } from 'react'
+import SiteNav from '../../components/SiteNav/SiteNav'
+import SkipLink from '../../components/SkipLink/SkipLink'
+import { useDebouncedValue } from '../../lib/useDebouncedValue'
+import type { MountainArea } from '../../lib/mountainAreas.ts'
+import {
+  ALL_KINDS,
+  countOf,
+  describe,
+  KINDS,
+  REGIONS,
+  regionOf,
+  searchPoints,
+  tileUrl,
+  type Region,
+  type SearchHit,
+} from './data.ts'
+
+type OverviewProps = {
+  authenticated: boolean
+  areas: MountainArea[] | null
+  error: string
+  notFound: string | null
+  onOpen: () => void
+}
+
+export default function Overview({ authenticated, areas, error, notFound, onOpen }: OverviewProps) {
+  const [region, setRegion] = useState<Region | 'all'>('all')
+  const [query, setQuery] = useState('')
+  const needle = query.trim().toLowerCase()
+  const shown = (areas ?? [])
+    .filter(
+      (a) =>
+        (region === 'all' || regionOf(a) === region) &&
+        (!needle || `${a.name} ${a.description ?? ''}`.toLowerCase().includes(needle)),
+    )
+    .sort((a, b) => (b.highestPeak?.elevation ?? 0) - (a.highestPeak?.elevation ?? 0))
+
+  // Søket finner også hytter og topper. Backend spørres en kort stund etter at man har sluttet å skrive,
+  // og treffene huskes sammen med søketeksten, så gamle treff ikke vises for et nytt søk.
+  const [search, setSearch] = useState<{ needle: string; hits: SearchHit[] }>({
+    needle: '',
+    hits: [],
+  })
+  const debouncedNeedle = useDebouncedValue(needle, 250)
+  useEffect(() => {
+    if (debouncedNeedle.length < 2) return
+    const controller = new AbortController()
+    searchPoints(debouncedNeedle, controller.signal)
+      .then((hits) => setSearch({ needle: debouncedNeedle, hits }))
+      .catch(() => {
+        /* søket i hytter og topper er et tillegg, så feil vises ikke */
+      })
+    return () => controller.abort()
+  }, [debouncedNeedle])
+  const hits = search.needle === needle ? search.hits : []
+  const areaName = (id: string) => areas?.find((a) => a.id === id)?.name ?? id
+
+  return (
+    <div className="fo-page">
+      <SkipLink />
+      <SiteNav active="mountains" authenticated={authenticated} />
+      <main id="main">
+        <header className="fo-hero">
+          <h1>Fjellområder i Norge</h1>
+          <p>
+            Velg et fjellområde for å åpne kartet, med alle hyttene, buene, gapahukene og toppene på
+            ett sted.
+          </p>
+        </header>
+
+        <section className="fo-filters">
+          <div className="fo-chips">
+            {(['all', 'S', 'M', 'N'] as const).map((r) => (
+              <button
+                key={r}
+                type="button"
+                aria-pressed={region === r}
+                onClick={() => setRegion(r)}
+              >
+                {r === 'all' ? 'Alle' : REGIONS[r]}
+              </button>
+            ))}
+          </div>
+          <label className="fo-search">
+            <span className="sr-only">Søk etter område, hytte eller topp</span>
+            <input
+              type="search"
+              placeholder="Søk etter område, hytte eller topp …"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </label>
+        </section>
+
+        <div className="fo-messages">
+          {error && (
+            <p className="fo-error" role="alert">
+              Fikk ikke hentet fjellområdene: {error}
+            </p>
+          )}
+          {!areas && !error && <p className="fo-note">Henter fjellområder …</p>}
+          {notFound && (
+            <p className="fo-error" role="alert">
+              Fant ikke fjellområdet «{notFound}». Velg et av områdene under.
+            </p>
+          )}
+          {areas && shown.length === 0 && hits.length === 0 && (
+            <p className="fo-note">Ingen fjellområder, hytter eller topper passer søket.</p>
+          )}
+        </div>
+
+        {hits.length > 0 && (
+          <section className="fo-hits" aria-label="Hytter og topper som passer søket">
+            {hits.map(({ areaId, point }) => (
+              <a key={`${areaId}/${point.id}`} href={`#/${areaId}/${point.id}`} onClick={onOpen}>
+                <span className="fo-dot" style={{ background: KINDS[point.kind].color }} />
+                <span className="fo-row-text">
+                  <strong>{point.name}</strong>
+                  <small>
+                    {KINDS[point.kind].one} · {areaName(areaId)} · {describe(point)}
+                  </small>
+                </span>
+              </a>
+            ))}
+          </section>
+        )}
+
+        <section className="fo-grid">
+          {shown.map((a) => (
+            <a key={a.id} href={`#/${a.id}`} className="fo-card" onClick={onOpen}>
+              <div className="fo-card-map">
+                <img src={tileUrl(a)} alt="" loading="lazy" />
+                <span>{REGIONS[regionOf(a)]}</span>
+              </div>
+              <div className="fo-card-body">
+                <h3>
+                  {a.name} <span aria-hidden="true">→</span>
+                </h3>
+                <p>{a.description}</p>
+                <dl className="fo-counts">
+                  {ALL_KINDS.map((k) => (
+                    <div key={k}>
+                      <dd>{countOf(a, k)}</dd>
+                      <dt>{KINDS[k].short.toLowerCase()}</dt>
+                    </div>
+                  ))}
+                </dl>
+                {a.highestPeak && (
+                  <p className="fo-top">
+                    Høyeste topp · <strong>{a.highestPeak.name}</strong>{' '}
+                    <span>{a.highestPeak.elevation} moh.</span>
+                  </p>
+                )}
+              </div>
+            </a>
+          ))}
+        </section>
+      </main>
+    </div>
+  )
+}
diff --git a/src/pages/Fjellomrade/data.ts b/src/pages/Fjellomrade/data.ts
new file mode 100644
index 0000000..8e8d5e0
--- /dev/null
+++ b/src/pages/Fjellomrade/data.ts
@@ -0,0 +1,120 @@
+// Data om fjellområdene og punktene i dem: typer, utseende per type, opptelling, landsdeler og
+// henting fra backend.
+import { graphql } from '../../lib/graphql.ts'
+import type { MountainArea } from '../../lib/mountainAreas.ts'
+
+export type PoiKind = 'HUT' | 'CABIN' | 'SHELTER' | 'PEAK'
+export type PointOfInterest = {
+  id: string
+  kind: PoiKind
+  dntType: string | null
+  name: string | null
+  lon: number
+  lat: number
+  elevation: number | null
+  capacity: number | null
+  inside: boolean // false for punktene opptil 10 km utenfor grensen, som bare vises svakt på kartet
+}
+
+// Navn, farge og ikon for hver type. Rekkefølgen her er rekkefølgen i fanene.
+// Ikonet er en SVG-sti i et rutenett på 24 × 24 som tegnes med hvit strek i en farget sirkel på kartet.
+export const KINDS: Record<PoiKind, { short: string; one: string; color: string; icon: string }> = {
+  HUT: {
+    short: 'Hytter',
+    one: 'Turisthytte',
+    color: '#c0392b',
+    icon: 'M5 12 12 6l7 6M7 11v7h10v-7M11 18v-4h2v4',
+  },
+  CABIN: {
+    short: 'Buer',
+    one: 'Bu / koie',
+    color: '#c27730',
+    icon: 'M6 18v-6l6-5 6 5v6zM10 18v-3h4v3',
+  },
+  SHELTER: {
+    short: 'Gapahuker',
+    one: 'Gapahuk',
+    color: '#2f8f5b',
+    icon: 'M5 18 12 6l7 12M9 18l3-5 3 5',
+  },
+  PEAK: { short: 'Topper', one: 'Topp', color: '#203b32', icon: 'm4 18 6-10 3 5 2-3 5 8z' },
+}
+export const ALL_KINDS = Object.keys(KINDS) as PoiKind[]
+
+const POI_QUERY = `
+  query AreaPointsOfInterest($areaId: ID!) {
+    areaPointsOfInterest(areaId: $areaId) { id kind dntType name lon lat elevation capacity inside }
+  }
+`
+
+const SEARCH_QUERY = `
+  query SearchPointsOfInterest($query: String!) {
+    searchPointsOfInterest(query: $query) { areaId point { id kind dntType name lon lat elevation capacity inside } }
+  }
+`
+export type SearchHit = { areaId: string; point: PointOfInterest }
+
+// Backend henter punktene i området og like utenfor. inside er true for dem som er med i opptellingen.
+export async function fetchPoints(areaId: string, signal: AbortSignal): Promise<PointOfInterest[]> {
+  const data = await graphql<{ areaPointsOfInterest: PointOfInterest[] }>(
+    POI_QUERY,
+    { areaId },
+    signal,
+  )
+  return data.areaPointsOfInterest
+}
+
+// Undertekst for et punkt i lista og i boksen for valgt punkt
+export function describe(p: PointOfInterest) {
+  if (p.kind === 'PEAK') return p.elevation !== null ? `${p.elevation} moh.` : 'Ukjent høyde'
+  return (
+    [
+      p.capacity !== null && `${p.capacity} sengeplasser`,
+      p.dntType,
+      p.elevation !== null && `${p.elevation} moh.`,
+    ]
+      .filter(Boolean)
+      .join(' · ') || KINDS[p.kind].one
+  )
+}
+
+/** Søker etter hytter og topper på navn, på tvers av alle fjellområder */
+export async function searchPoints(query: string, signal: AbortSignal): Promise<SearchHit[]> {
+  const data = await graphql<{ searchPointsOfInterest: SearchHit[] }>(
+    SEARCH_QUERY,
+    { query },
+    signal,
+  )
+  return data.searchPointsOfInterest
+}
+
+// Antallet som allerede er talt opp i databasen for hvert område, per type
+export const countOf = (area: MountainArea, kind: PoiKind) =>
+  ({
+    HUT: area.hutCount,
+    CABIN: area.cabinCount,
+    SHELTER: area.shelterCount,
+    PEAK: area.peakCount,
+  })[kind]
+
+// Grov inndeling i landsdel etter breddegraden midt i området
+export type Region = 'S' | 'M' | 'N'
+export const REGIONS: Record<Region, string> = { S: 'Sør-Norge', M: 'Midt-Norge', N: 'Nord-Norge' }
+export function regionOf(area: MountainArea): Region {
+  const lat = (area.bbox[1] + area.bbox[3]) / 2
+  return lat >= 65.5 ? 'N' : lat >= 62 ? 'M' : 'S'
+}
+
+export const KARTVERKET_TILES =
+  'https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png'
+
+// Én kartflis fra Kartverket midt i området, brukt som bilde på kortet i oversikten
+export function tileUrl(area: MountainArea, z = 7) {
+  const lon = (area.bbox[0] + area.bbox[2]) / 2
+  const lat = ((area.bbox[1] + area.bbox[3]) / 2) * (Math.PI / 180)
+  const x = Math.floor(((lon + 180) / 360) * 2 ** z)
+  const y = Math.floor(((1 - Math.log(Math.tan(lat) + 1 / Math.cos(lat)) / Math.PI) / 2) * 2 ** z)
+  return KARTVERKET_TILES.replace('{z}', String(z))
+    .replace('{y}', String(y))
+    .replace('{x}', String(x))
+}
diff --git a/src/fjellomrade-main.tsx b/src/pages/Fjellomrade/fjellomrade-main.tsx
similarity index 85%
rename from src/fjellomrade-main.tsx
rename to src/pages/Fjellomrade/fjellomrade-main.tsx
index 0c36f55..a9cf80b 100644
--- a/src/fjellomrade-main.tsx
+++ b/src/pages/Fjellomrade/fjellomrade-main.tsx
@@ -1,5 +1,5 @@
 // Startpunkt for fjellområdesiden (fjellomrade.html), på samme måte som main.tsx er det for appen.
-// Åpnes på http://localhost:5173/fjellomrade.html mens både backend (npm run dev:server:ts) og frontend (npm run dev) kjører.
+// Åpnes på http://localhost:5173/fjellomrade.html mens både backend (npm run dev:server) og frontend (npm run dev) kjører.
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import Fjellomrade from './Fjellomrade.tsx'
diff --git a/src/pages/Fjellomrade/mapData.ts b/src/pages/Fjellomrade/mapData.ts
new file mode 100644
index 0000000..1b9a7e2
--- /dev/null
+++ b/src/pages/Fjellomrade/mapData.ts
@@ -0,0 +1,75 @@
+// Data og stil for kartet over et fjellområde.
+import type { ExpressionSpecification, StyleSpecification } from 'maplibre-gl'
+import type { Feature, FeatureCollection, MultiPolygon, Point, Polygon, Position } from 'geojson'
+import type { MountainArea } from '../../lib/mountainAreas.ts'
+import { ALL_KINDS, KARTVERKET_TILES, KINDS, type PointOfInterest } from './data.ts'
+
+export const COLOR_BY_KIND = [
+  'match',
+  ['get', 'kind'],
+  ...ALL_KINDS.flatMap((k) => [k, KINDS[k].color]),
+  '#999',
+] as unknown as ExpressionSpecification
+
+export const MAP_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {
+    topo: {
+      type: 'raster',
+      tiles: [KARTVERKET_TILES],
+      tileSize: 256,
+      maxzoom: 18,
+      attribution:
+        '© Kartverket · © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap-bidragsytere</a>',
+    },
+    // Flyfoto fra Esri, samme kilde som i ex P2. Laget er skjult til brukeren bytter til flyfoto.
+    satellitt: {
+      type: 'raster',
+      tiles: [
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      ],
+      tileSize: 256,
+      maxzoom: 18,
+      attribution: 'Bilder © Esri, Maxar, Earthstar Geographics',
+    },
+  },
+  layers: [
+    { id: 'topo', type: 'raster', source: 'topo' },
+    { id: 'satellitt', type: 'raster', source: 'satellitt', layout: { visibility: 'none' } },
+  ],
+}
+
+export function pointsToGeoJson(
+  points: PointOfInterest[],
+): FeatureCollection<Point, PointOfInterest> {
+  return {
+    type: 'FeatureCollection',
+    features: points.map((p) => ({
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [p.lon, p.lat] },
+      properties: p,
+    })),
+  }
+}
+
+export const boundaryOf = (area: MountainArea) => JSON.parse(area.geojson) as Polygon | MultiPolygon
+
+// Et polygon som dekker hele verden, med området som hull, brukes til et svakt slør over kartet utenfor området.
+// Hullene er ytterkanten av hver del av grensen, så det virker både for Polygon og MultiPolygon.
+export function maskAround(area: MountainArea): Feature<Polygon> {
+  const geometry = boundaryOf(area)
+  const parts: Position[][][] =
+    geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates
+  const world = [
+    [-180, -85],
+    [180, -85],
+    [180, 85],
+    [-180, 85],
+    [-180, -85],
+  ]
+  return {
+    type: 'Feature',
+    properties: {},
+    geometry: { type: 'Polygon', coordinates: [world, ...parts.map((rings) => rings[0])] },
+  }
+}
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
new file mode 100644
index 0000000..2f03a15
--- /dev/null
+++ b/src/pages/Home/Home.css
@@ -0,0 +1,412 @@
+/* Forsiden. Header-stilen kommer fra App.css. */
+.home-header .header-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+/* Forsiden skal gå kant i kant, så vi overstyrer max-width/padding fra main i App.css */
+.home-main {
+  max-width: none;
+  padding: 0;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* ---------- Hero med bakgrunnsbilde ---------- */
+.home-hero {
+  position: relative;
+  min-height: 560px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 5%;
+  background-color: #2c5a49;
+  /* vises hvis bildet mangler eller ikke er lastet ennå */
+  background-size: cover;
+  background-position: 72% center; /* holder fotturisten i bildet også på smale skjermer */
+}
+
+/* Mørk toning over bildet så den hvite teksten får god kontrast (WCAG) */
+.home-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.45));
+}
+
+.home-hero-content {
+  position: relative;
+  width: min(100%, 960px);
+  text-align: center;
+}
+
+.home-hero h1 {
+  color: #fff;
+  margin: 0 0 40px;
+  text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
+}
+
+.home-search {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: #fff;
+  border-radius: 10px;
+  padding: 0 24px;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+  color: #2c6e57;
+}
+
+.home-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  padding: 24px 0;
+  font: inherit;
+  font-size: 20px;
+  color: #203b32;
+  background: transparent;
+}
+
+.home-search input::placeholder {
+  color: #2c6e57;
+}
+
+/* Skjuler den oransje fokusrammen (fra App.css) rundt søkefeltet */
+.home-search input:focus-visible {
+  outline: none;
+}
+
+.home-search-results {
+  text-align: left;
+  margin-top: 10px;
+}
+
+.home-search-results p {
+  color: #fff;
+  margin: 8px 4px;
+  font-size: 14px;
+}
+
+/* Ett hvitt panel med gruppene «Steder» og «Turer» */
+.home-search-panel {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+  padding: 6px;
+}
+
+.home-search-group {
+  margin: 10px 16px 4px;
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: #557365;
+}
+
+.home-search-results ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.home-search-results button {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  text-align: left;
+  background: transparent;
+  color: #203b32;
+  padding: 12px 16px;
+}
+
+.home-search-results button:hover {
+  background: #edf2e9;
+}
+
+.home-search-results span {
+  color: #5a6c61;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.home-hero-credit {
+  position: absolute;
+  right: 16px;
+  bottom: 8px;
+  margin: 0;
+  font-size: 13px;
+  color: rgb(255 255 255 / 0.85);
+}
+
+/* ---------- Turforslag i nærområdet ---------- */
+.home-nearby {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 72px 5%;
+  text-align: center;
+}
+
+.home-nearby h2 {
+  font-size: clamp(26px, 3.5vw, 38px);
+  margin: 0;
+}
+
+.home-suggestions {
+  list-style: none;
+  padding: 0;
+  margin: 24px 0 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  text-align: left;
+}
+
+.home-suggestions button {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+  background: #fff;
+  color: #203b32;
+  border: 1px solid #dce1d7;
+  border-radius: 14px;
+  padding: 20px;
+  overflow-wrap: anywhere;
+}
+
+.home-suggestions button:hover {
+  border-color: #126b51;
+}
+
+.home-suggestions strong {
+  font-size: 18px;
+}
+
+.home-suggestion-length {
+  font-size: 15px;
+  font-weight: 600;
+  color: #126b51;
+}
+
+.home-suggestion-meta {
+  font-size: 13px;
+  color: #5a6c61;
+}
+
+@media (max-width: 800px) {
+  .home-hero {
+    min-height: 440px;
+  }
+
+  .home-search input {
+    font-size: 17px;
+    padding: 18px 0;
+  }
+
+  .home-suggestions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .home-suggestions {
+    grid-template-columns: 1fr;
+  }
+}
+.home-nearby-subtitle {
+  color: #5a6c61;
+  margin: 8px 0 0;
+}
+
+.home-nearby:focus {
+  outline: none;
+} /* får fokus fra koden når et sted velges, trenger ingen ramme */
+
+.home-nearby-reset {
+  margin-top: 8px;
+}
+
+/* Forsidens naturbilde og søk, med eksisterende kommunesøk bevart. */
+.home-main {
+  max-width: 1432px;
+  margin: 0 auto;
+  padding: 24px 56px;
+  font-family: 'Avenir Next', system-ui, sans-serif;
+}
+.home-hero {
+  min-height: 480px;
+  padding: 60px;
+  justify-content: flex-start;
+  border-radius: 16px;
+  background-position: center;
+  overflow: hidden;
+}
+.home-hero::before {
+  background: linear-gradient(
+    90deg,
+    rgba(17, 37, 24, 0.8),
+    rgba(17, 37, 24, 0.36) 50%,
+    rgba(17, 37, 24, 0.06)
+  );
+}
+.home-hero-content {
+  width: min(670px, 100%);
+  text-align: left;
+}
+.home-eyebrow {
+  color: #d4dfcc;
+  letter-spacing: 2.4px;
+  font-size: 10px;
+  font-weight: 600;
+  margin: 0 0 20px;
+}
+.home-hero h1 {
+  font-size: clamp(40px, 5.6vw, 68px);
+  font-weight: 600;
+  line-height: 1.03;
+  letter-spacing: -2.5px;
+  margin: 0 0 22px;
+  text-shadow: none;
+}
+.home-intro {
+  color: #e6ebe1;
+  font-size: 16px;
+  line-height: 1.65;
+  margin: 0 0 28px;
+}
+.home-search {
+  width: min(590px, 100%);
+  gap: 12px;
+  padding: 7px 7px 7px 17px;
+  border-radius: 10px;
+  color: #667c64;
+  box-shadow: 0 8px 24px #10211720;
+}
+.home-search svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+.home-search input {
+  font-size: 13px;
+  padding: 12px 0;
+  color: #23382c;
+}
+.home-search input::placeholder {
+  color: #7b8577;
+}
+.home-search:focus-within {
+  outline: 2px solid #c7d5bc;
+  outline-offset: 3px;
+}
+.home-search .home-find-button {
+  background: #435d47;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 13px 17px;
+  border-radius: 8px;
+  white-space: nowrap;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+.home-search .home-find-button:hover {
+  background: #304c37;
+}
+.home-hero-credit {
+  right: 18px;
+  bottom: 14px;
+  padding: 5px 9px;
+  border-radius: 4px;
+  background: #152e2455;
+  font-size: 9px;
+  color: #edf1e8;
+}
+.home-search-results {
+  width: min(590px, 100%);
+}
+.home-search-panel {
+  max-height: 400px;
+  overflow-y: auto;
+}
+.home-search-results button {
+  align-items: center;
+  min-width: 0;
+}
+.home-search-results strong {
+  overflow-wrap: anywhere;
+}
+.home-nearby {
+  padding: 48px 0;
+  max-width: none;
+  text-align: left;
+}
+.home-nearby h2 {
+  font-size: 28px;
+  letter-spacing: -0.8px;
+  font-weight: 600;
+}
+@media (max-width: 1050px) {
+  .home-main {
+    padding: 20px 28px;
+  }
+  .home-hero {
+    padding: 40px;
+    min-height: 430px;
+  }
+}
+@media (max-width: 720px) {
+  .home-main {
+    padding: 16px;
+  }
+  .home-hero {
+    padding: 36px 24px;
+    min-height: 430px;
+    background-position: 60% center;
+  }
+  .home-hero h1 {
+    font-size: 48px;
+  }
+  .home-search {
+    gap: 8px;
+    padding-left: 12px;
+  }
+  .home-search input {
+    font-size: 12px;
+  }
+  .home-search .home-find-button {
+    padding: 12px;
+    font-size: 11px;
+    gap: 9px;
+  }
+  .home-nearby h2 {
+    font-size: 23px;
+  }
+  .home-search-results span {
+    white-space: normal;
+    text-align: right;
+    font-size: 12px;
+  }
+}
+@media (max-width: 390px) {
+  .home-hero h1 {
+    font-size: 42px;
+  }
+  .home-search svg,
+  .home-find-button span {
+    display: none;
+  }
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
new file mode 100644
index 0000000..a751b70
--- /dev/null
+++ b/src/pages/Home/Home.tsx
@@ -0,0 +1,370 @@
+import SiteNav from '../../components/SiteNav/SiteNav'
+import SkipLink from '../../components/SkipLink/SkipLink'
+import { useEffect, useRef, useState } from 'react'
+import { graphql, TOKEN_KEY } from '../../lib/graphql'
+import {
+  ROUTE_GROUP_FIELDS,
+  SEARCH_QUERY,
+  type PlaceHit,
+  type RoutePage,
+  type SearchData,
+} from '../../lib/routeSearch'
+import {
+  lengthText,
+  type RouteGroup,
+  type RouteSummary,
+  type SelectedRoute,
+} from '../../lib/routeTypes'
+import { useDebouncedValue } from '../../lib/useDebouncedValue'
+import './Home.css'
+
+/**
+ * Lenke til bakgrunnsbildet øverst på forsiden.
+ * Lim inn URL-en til bildet her (eller legg bildet i public/ og skriv f.eks. '/hero.jpg').
+ * Er feltet tomt, vises en grønn bakgrunn i stedet.
+ */
+const HERO_IMAGE_URL = `${import.meta.env.BASE_URL}images/explore-nature.jpg`
+/** Kreditering av fotografen, vises nederst i hjørnet av bildet. La stå tom hvis ikke nødvendig. */
+const HERO_IMAGE_CREDIT = 'Generert stemningsbilde'
+
+/** Hvor lenge vi venter etter siste tastetrykk før vi søker (debouncing, sparer requests) */
+const SEARCH_DELAY_MS = 300
+
+type Municipality = { code: string; name: string }
+type PopularRoute = { favoriteCount: number; route: RouteSummary }
+
+const POPULAR_QUERY = `query($limit:Int!){
+  popularRoutes(limit:$limit){ favoriteCount route{id name number lengthMeters difficulty routeType duplicateCount variantCount} }
+}`
+
+/** Gjør en populær tur om til samme form som et søketreff, så kortene kan vises likt */
+function popularToGroup({ favoriteCount, route }: PopularRoute): RouteGroup {
+  return {
+    key: route.id,
+    name: route.name,
+    variantCount: 1,
+    minLengthMeters: route.lengthMeters,
+    maxLengthMeters: route.lengthMeters,
+    variants: [route],
+    favoriteCount,
+  }
+}
+
+// Samme felter som turlisten bruker, men med få treff siden forsiden bare viser et utvalg
+const ROUTES_QUERY = `query($search:String!,$municipality:String,$limit:Int!){
+  routes(search:$search,municipality:$municipality,limit:$limit){
+    total items{ ${ROUTE_GROUP_FIELDS} }
+  }
+}`
+
+export default function Home({
+  onLoginClick,
+  onSelectRoute,
+  authenticated = false,
+  onProfileClick,
+  onExploreClick,
+}: {
+  authenticated?: boolean
+  onProfileClick?: () => void
+  onExploreClick?: () => void
+  onLoginClick: () => void
+  onSelectRoute: (route: SelectedRoute) => void
+}) {
+  // --- Søk ---
+  const [input, setInput] = useState('')
+  // Svaret lagres sammen med søket det hører til. Da kan status avledes under rendering
+  // i stedet for å settes i effekten (unngår ekstra renders).
+  const [searchResult, setSearchResult] = useState<{
+    search: string
+    data: SearchData | null
+  } | null>(null)
+
+  // Søk med debouncing: venter til brukeren har sluttet å skrive, og avbryter utdaterte requests
+  const debouncedSearch = useDebouncedValue(input.trim(), SEARCH_DELAY_MS)
+  useEffect(() => {
+    const search = debouncedSearch
+    if (search.length < 2) return
+    const controller = new AbortController()
+    graphql<SearchData>(SEARCH_QUERY, { search, limit: 6 }, controller.signal)
+      .then((data) => setSearchResult({ search, data }))
+      .catch(() => {
+        if (!controller.signal.aborted) setSearchResult({ search, data: null })
+      })
+    return () => controller.abort()
+  }, [debouncedSearch])
+  const trimmed = input.trim()
+  const searchStatus =
+    trimmed.length < 2
+      ? 'idle'
+      : searchResult?.search !== trimmed
+        ? 'loading'
+        : searchResult.data
+          ? 'ready'
+          : 'error'
+  const results = searchStatus === 'ready' ? searchResult!.data!.routes : null
+  const places = searchStatus === 'ready' ? searchResult!.data!.searchMunicipalities : []
+
+  // --- Nærområde ---
+  // Stedet velges i profilen (Profile.tsx) og lagres på brukeren i databasen.
+  // Forsiden leser det bare, og viser turforslag derfra.
+  const [token] = useState(() => localStorage.getItem(TOKEN_KEY))
+  const [home, setHome] = useState<Municipality | null>(null)
+  // Sted valgt fra søkefeltet. Gjelder bare nå og lagres ikke, men går foran stedet i profilen.
+  const [place, setPlace] = useState<Municipality | null>(null)
+  const area = place ?? home
+  const nearbyRef = useRef<HTMLElement>(null)
+  const [suggestionResult, setSuggestionResult] = useState<{
+    key: string
+    items: RouteGroup[] | null
+  } | null>(null)
+
+  // Henter stedet som er lagret på brukeren, hvis man er logget inn
+  useEffect(() => {
+    if (!token) return
+    const controller = new AbortController()
+    graphql<{ me: { homeMunicipality: Municipality | null } | null }>(
+      'query($token:String!){me(token:$token){homeMunicipality{code name}}}',
+      { token },
+      controller.signal,
+    )
+      .then((data) => setHome(data.me?.homeMunicipality ?? null))
+      .catch(() => undefined)
+    return () => controller.abort()
+  }, [token])
+
+  // Turforslag: fra brukerens sted hvis det er valgt, ellers de mest populære turene i hele Norge.
+  // Filtreringen skjer i databasen, ikke på klienten.
+  const suggestionKey = area?.code ?? ''
+  useEffect(() => {
+    const controller = new AbortController()
+    const request = suggestionKey
+      ? graphql<RoutePage>(
+          ROUTES_QUERY,
+          { search: '', municipality: suggestionKey, limit: 6 },
+          controller.signal,
+        ).then((data) => data.routes.items)
+      : graphql<{ popularRoutes: PopularRoute[] }>(
+          POPULAR_QUERY,
+          { limit: 6 },
+          controller.signal,
+        ).then((data) => data.popularRoutes.map(popularToGroup))
+    request
+      .then((items) => setSuggestionResult({ key: suggestionKey, items }))
+      .catch(() => {
+        if (!controller.signal.aborted) setSuggestionResult({ key: suggestionKey, items: null })
+      })
+    return () => controller.abort()
+  }, [suggestionKey])
+  const suggestionStatus =
+    suggestionResult?.key !== suggestionKey ? 'loading' : suggestionResult.items ? 'ready' : 'error'
+  const suggestions = suggestionResult?.items ?? []
+
+  function choosePlace(chosen: PlaceHit) {
+    setPlace({ code: chosen.code, name: chosen.name })
+    setInput('')
+    // Flytt synet (og fokus for skjermlesere) ned til turene i det valgte stedet
+    window.requestAnimationFrame(() => {
+      nearbyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      nearbyRef.current?.focus({ preventScroll: true })
+    })
+  }
+
+  return (
+    <>
+      <SkipLink />
+      <SiteNav
+        active="home"
+        authenticated={authenticated}
+        onHome={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        onExplore={onExploreClick}
+        onProfile={authenticated ? onProfileClick : onLoginClick}
+      />
+      <main id="main" className="home-main">
+        <section
+          className="home-hero"
+          aria-labelledby="home-title"
+          style={HERO_IMAGE_URL ? { backgroundImage: `url("${HERO_IMAGE_URL}")` } : undefined}
+        >
+          <div className="home-hero-content">
+            <p className="home-eyebrow">DITT NESTE PUSTEROM</p>
+            <h1 id="home-title">
+              Finn veien
+              <br />
+              til litt mer ute.
+            </h1>
+            <p className="home-intro">
+              Små avbrekk. Lange eventyr.
+              <br />
+              Utforsk turer og finn din egen vei.
+            </p>
+            <form
+              className="home-search"
+              role="search"
+              onSubmit={(event) => {
+                event.preventDefault()
+                if (trimmed.length < 2) document.getElementById('home-search-input')?.focus()
+                else
+                  document
+                    .getElementById('home-search-results')
+                    ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+              }}
+            >
+              <label htmlFor="home-search-input" className="visually-hidden">
+                Søk etter turer
+              </label>
+              <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24">
+                <circle
+                  cx="10.5"
+                  cy="10.5"
+                  r="6.5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                />
+                <path
+                  d="m15.5 15.5 5 5"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <input
+                id="home-search-input"
+                type="search"
+                placeholder="Hvor vil du gå? Søk etter en rute eller et sted"
+                autoComplete="off"
+                maxLength={120}
+                value={input}
+                onChange={(event) => setInput(event.target.value)}
+                aria-describedby="home-search-status"
+              />
+              <button type="submit" className="home-find-button">
+                Finn turer <span aria-hidden="true">→</span>
+              </button>
+            </form>
+            <div className="home-search-results" id="home-search-results">
+              <p
+                id="home-search-status"
+                role="status"
+                className={searchStatus === 'ready' ? '' : 'visually-hidden'}
+              >
+                {searchStatus === 'loading' && 'Søker …'}
+                {searchStatus === 'error' && 'Søket feilet. Kontroller at backend kjører.'}
+                {searchStatus === 'ready' &&
+                  (results?.total || places.length
+                    ? [
+                        places.length
+                          ? `${places.length} ${places.length === 1 ? 'sted' : 'steder'}`
+                          : '',
+                        results?.total
+                          ? `${results.total.toLocaleString('nb-NO')} turer${results.total > results.items.length ? ` (viser ${results.items.length})` : ''}`
+                          : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' og ')
+                    : 'Ingen steder eller turer passer søket.')}
+              </p>
+              {searchStatus === 'ready' &&
+                (places.length > 0 || (results && results.items.length > 0)) && (
+                  <div className="home-search-panel">
+                    {places.length > 0 && (
+                      <>
+                        <h3 className="home-search-group">Steder</h3>
+                        <ul>
+                          {places.map((item) => (
+                            <li key={item.code}>
+                              <button type="button" onClick={() => choosePlace(item)}>
+                                <strong>{item.name}</strong>
+                                <span>{item.routeCount.toLocaleString('nb-NO')} turer</span>
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    )}
+                    {results && results.items.length > 0 && (
+                      <>
+                        <h3 className="home-search-group">Turer</h3>
+                        <ul>
+                          {results.items.map((group) => (
+                            <li key={group.key}>
+                              <button
+                                type="button"
+                                onClick={() => onSelectRoute(group.variants[0])}
+                              >
+                                <strong>{group.name}</strong>
+                                <span>
+                                  {group.variantCount > 1
+                                    ? `${group.variantCount} varianter · `
+                                    : ''}
+                                  {lengthText(group)}
+                                </span>
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    )}
+                  </div>
+                )}
+            </div>
+          </div>
+          {HERO_IMAGE_CREDIT && <p className="home-hero-credit">{HERO_IMAGE_CREDIT}</p>}
+        </section>
+
+        <section
+          className="home-nearby"
+          aria-labelledby="nearby-title"
+          ref={nearbyRef}
+          tabIndex={-1}
+        >
+          <h2 id="nearby-title">
+            {area ? `Velg din neste tur i ${area.name}` : 'Velg din neste tur'}
+          </h2>
+          {!area && <p className="home-nearby-subtitle">De mest populære turene i Norge</p>}
+          {place && (
+            <button
+              type="button"
+              className="text-button home-nearby-reset"
+              onClick={() => setPlace(null)}
+            >
+              {home ? `Tilbake til ${home.name}` : 'Vis de mest populære turene'}
+            </button>
+          )}
+          {suggestionStatus === 'loading' && <p role="status">Henter turforslag …</p>}
+          {suggestionStatus === 'error' && (
+            <p role="alert">Kunne ikke hente turforslag. Kontroller at backend kjører.</p>
+          )}
+          {suggestionStatus === 'ready' && suggestions.length === 0 && (
+            <p>Fant ingen registrerte turer{area ? ` i ${area.name}` : ''}.</p>
+          )}
+          {suggestionStatus === 'ready' && suggestions.length > 0 && (
+            <ul className="home-suggestions">
+              {suggestions.map((group) => {
+                const first = group.variants[0]
+                return (
+                  <li key={group.key}>
+                    <button type="button" onClick={() => onSelectRoute(first)}>
+                      <strong>{group.name}</strong>
+                      <span className="home-suggestion-length">{lengthText(group)}</span>
+                      <span className="home-suggestion-meta">
+                        {[first.difficulty, first.routeType].filter(Boolean).join(' · ') ||
+                          'Turrute'}
+                      </span>
+                      {group.favoriteCount ? (
+                        <span className="home-suggestion-meta">
+                          Lagret av {group.favoriteCount}{' '}
+                          {group.favoriteCount === 1 ? 'bruker' : 'brukere'}
+                        </span>
+                      ) : null}
+                    </button>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </section>
+      </main>
+    </>
+  )
+}
diff --git a/src/pages/Profile/AuthGate.tsx b/src/pages/Profile/AuthGate.tsx
new file mode 100644
index 0000000..2ba5cf2
--- /dev/null
+++ b/src/pages/Profile/AuthGate.tsx
@@ -0,0 +1,247 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import SiteNav from '../../components/SiteNav/SiteNav'
+import SkipLink from '../../components/SkipLink/SkipLink'
+import PasswordInput from '../../components/PasswordInput'
+import { checkSession, graphql, TOKEN_KEY } from '../../lib/graphql'
+
+/** Innlogging, registrering og tilbakestilling av passord. Vises når brukeren ikke er logget inn. */
+export default function AuthGate({
+  onAuthenticated,
+  onSkip,
+  onHome,
+}: {
+  onAuthenticated: () => void
+  onSkip: () => void
+  onHome?: () => void
+}) {
+  const resetToken = window.location.hash.startsWith('#reset-password/')
+    ? window.location.hash.split('/')[1]
+    : ''
+  const [mode, setMode] = useState<'login' | 'register' | 'forgot' | 'reset'>(
+    resetToken ? 'reset' : 'login',
+  )
+  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [checking, setChecking] = useState(
+    () => !resetToken && Boolean(localStorage.getItem(TOKEN_KEY)),
+  )
+  useEffect(() => {
+    const token = localStorage.getItem(TOKEN_KEY)
+    if (!token || resetToken) return
+    const controller = new AbortController()
+    checkSession(AbortSignal.any([controller.signal, AbortSignal.timeout(15000)]))
+      .then((valid) => {
+        if (valid && !controller.signal.aborted) onAuthenticated()
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) {
+          setError(true)
+          setMessage('Kunne ikke kontrollere innloggingen. Prøv igjen.')
+        }
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setChecking(false)
+      })
+    return () => controller.abort()
+  }, [onAuthenticated, resetToken])
+  function changeMode(next: typeof mode) {
+    setMode(next)
+    setMessage('')
+    setError(false)
+    setPassword('')
+    setConfirm('')
+  }
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    setBusy(true)
+    setMessage('')
+    setError(false)
+    try {
+      if ((mode === 'register' || mode === 'reset') && password !== confirm)
+        throw new Error('Passordene er ikke like.')
+      if (mode === 'forgot') {
+        await graphql('mutation($email:String!){requestPasswordReset(email:$email)}', {
+          email: email.trim(),
+        })
+        setMessage(
+          'Hvis adressen er knyttet til en profil, får den en tilbakestillingslenke. Lenken gjelder i 30 minutter.',
+        )
+      } else if (mode === 'reset') {
+        await graphql(
+          'mutation($token:String!,$newPassword:String!){resetPassword(token:$token,newPassword:$newPassword)}',
+          { token: resetToken, newPassword: password },
+        )
+        localStorage.removeItem(TOKEN_KEY)
+        window.history.replaceState(
+          null,
+          '',
+          window.location.pathname + window.location.search + '#profile',
+        )
+        changeMode('login')
+        setMessage('Passordet er endret. Logg inn med det nye passordet.')
+      } else {
+        const query =
+          mode === 'register'
+            ? 'mutation($username:String!,$password:String!,$email:String!){register(username:$username,password:$password,email:$email){token}}'
+            : 'mutation($username:String!,$password:String!){login(username:$username,password:$password){token}}'
+        const data = await graphql<Record<string, { token: string }>>(query, {
+          username: username.trim(),
+          password,
+          ...(mode === 'register' ? { email: email.trim() } : {}),
+        })
+        localStorage.setItem(TOKEN_KEY, data[mode].token)
+        onAuthenticated()
+      }
+    } catch (reason) {
+      setError(true)
+      setMessage(reason instanceof Error ? reason.message : 'Noe gikk galt. Prøv igjen.')
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <div className="auth-page">
+      <SkipLink />
+      <SiteNav authenticated={false} onHome={onHome} onExplore={onSkip} />
+      <main id="main" className="auth-main">
+        <section className="auth-card" aria-labelledby="auth-title">
+          <div className="auth-intro">
+            <p className="eyebrow">OPPDAG NORGE TIL FOTS</p>
+            <h1 id="auth-title">
+              {mode === 'register'
+                ? 'Opprett din profil.'
+                : mode === 'forgot'
+                  ? 'Glemt passord?'
+                  : mode === 'reset'
+                    ? 'Velg nytt passord.'
+                    : 'Velkommen tilbake.'}
+            </h1>
+            <p>
+              {mode === 'forgot'
+                ? 'Skriv inn e-postadressen på profilen din.'
+                : mode === 'reset'
+                  ? 'Velg et nytt passord på minst 10 tegn.'
+                  : mode === 'register'
+                    ? 'Alle feltene er obligatoriske. E-post brukes til å gjenopprette tilgangen til profilen.'
+                    : 'Logg inn for å lagre favoritter og planlegge turer.'}
+            </p>
+          </div>
+          {checking ? (
+            <p role="status">Kontrollerer innlogging …</p>
+          ) : (
+            <>
+              <form onSubmit={submit} className="profile-form">
+                {(mode === 'login' || mode === 'register') && (
+                  <label htmlFor="auth-username">
+                    Brukernavn
+                    <input
+                      id="auth-username"
+                      value={username}
+                      onChange={(event) => setUsername(event.target.value)}
+                      autoComplete="username"
+                      required
+                      minLength={3}
+                      maxLength={30}
+                      aria-describedby={mode === 'register' ? 'username-help' : undefined}
+                    />
+                    {mode === 'register' && (
+                      <small id="username-help">
+                        3–30 tegn: bokstaver, tall, punktum, bindestrek eller understrek.
+                      </small>
+                    )}
+                  </label>
+                )}
+                {(mode === 'register' || mode === 'forgot') && (
+                  <label htmlFor="auth-email">
+                    E-postadresse (obligatorisk)
+                    <input
+                      id="auth-email"
+                      type="email"
+                      value={email}
+                      onChange={(event) => setEmail(event.target.value)}
+                      autoComplete="email"
+                      required
+                      maxLength={254}
+                    />
+                  </label>
+                )}
+                {mode !== 'forgot' && (
+                  <label htmlFor="auth-password">
+                    {mode === 'reset' ? 'Nytt passord' : 'Passord'}
+                    <PasswordInput
+                      id="auth-password"
+                      value={password}
+                      onChange={(event) => setPassword(event.target.value)}
+                      autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+                      required
+                      minLength={10}
+                      maxLength={200}
+                      aria-describedby="password-help"
+                    />
+                    <small id="password-help">Minst 10 tegn.</small>
+                  </label>
+                )}
+                {(mode === 'register' || mode === 'reset') && (
+                  <label htmlFor="auth-confirm">
+                    Bekreft passord
+                    <PasswordInput
+                      id="auth-confirm"
+                      value={confirm}
+                      onChange={(event) => setConfirm(event.target.value)}
+                      autoComplete="new-password"
+                      required
+                      minLength={10}
+                      maxLength={200}
+                    />
+                  </label>
+                )}
+                <button disabled={busy}>
+                  {busy
+                    ? 'Vennligst vent …'
+                    : mode === 'register'
+                      ? 'Opprett profil'
+                      : mode === 'forgot'
+                        ? 'Send tilbakestillingslenke'
+                        : mode === 'reset'
+                          ? 'Lagre nytt passord'
+                          : 'Logg inn'}
+                </button>
+              </form>
+              {message && (
+                <p
+                  role={error ? 'alert' : 'status'}
+                  className={error ? 'auth-error' : 'auth-feedback'}
+                >
+                  {message}
+                </p>
+              )}
+              {mode === 'login' && (
+                <button
+                  type="button"
+                  className="text-button"
+                  disabled={busy}
+                  onClick={() => changeMode('forgot')}
+                >
+                  Glemt passord?
+                </button>
+              )}
+              <button
+                type="button"
+                className="text-button"
+                disabled={busy}
+                onClick={() => changeMode(mode === 'login' ? 'register' : 'login')}
+              >
+                {mode === 'login' ? 'Ny bruker? Opprett profil' : 'Tilbake til innlogging'}
+              </button>
+            </>
+          )}
+        </section>
+      </main>
+    </div>
+  )
+}
diff --git a/src/pages/Profile/OverviewTab.tsx b/src/pages/Profile/OverviewTab.tsx
new file mode 100644
index 0000000..df0cd91
--- /dev/null
+++ b/src/pages/Profile/OverviewTab.tsx
@@ -0,0 +1,225 @@
+import { formatKm } from '../../lib/format'
+import type { SelectedRoute, TripStatus, UserProfile } from './profileApi'
+
+type Props = {
+  user: UserProfile
+  /** Turen som er åpnet på Utforsk, så den kan lagres, planlegges eller markeres herfra */
+  selected: SelectedRoute | null
+  busy: boolean
+  goalMonth: string
+  onGoalMonthChange: (month: string) => void
+  onSaveGoal: (target: number | null) => void
+  onToggleFavorite: () => void
+  onSetTripStatus: (routeId: string, status: TripStatus | null) => void
+}
+
+/** Oversikten: statistikk, månedsmål, handlinger for valgt tur og merker. */
+export default function OverviewTab({
+  user,
+  selected,
+  busy,
+  goalMonth,
+  onGoalMonthChange,
+  onSaveGoal,
+  onToggleFavorite,
+  onSetTripStatus,
+}: Props) {
+  const favorite = Boolean(selected?.id && user.favorites.some((item) => item.id === selected.id))
+  const goal = user.goals.find((item) => item.month === goalMonth)
+  const monthlyCompleted = user.trips.filter(
+    (item) => item.status === 'COMPLETED' && item.completedOn?.startsWith(`${goalMonth}-`),
+  ).length
+  const completedTrips = user.trips.filter((item) => item.status === 'COMPLETED')
+  const hasReachedGoal = user.goals.some(
+    (item) =>
+      completedTrips.filter((trip) => trip.completedOn?.startsWith(`${item.month}-`)).length >=
+      item.target,
+  )
+
+  const badges = [
+    {
+      id: 'first',
+      symbol: '✓',
+      title: 'Første tur',
+      description: 'Marker én tur som gjennomført.',
+      unlocked: completedTrips.length >= 1,
+    },
+    {
+      id: 'five',
+      symbol: '5',
+      title: 'Fem turer',
+      description: 'Gjennomfør fem forskjellige ruter.',
+      unlocked: completedTrips.length >= 5,
+    },
+    {
+      id: 'ten',
+      symbol: '10',
+      title: 'Ti turer',
+      description: 'Gjennomfør ti forskjellige ruter.',
+      unlocked: completedTrips.length >= 10,
+    },
+    {
+      id: 'counties',
+      symbol: '⌖',
+      title: 'På tvers av fylker',
+      description: 'Gjennomfør ruter som til sammen berører minst tre fylker.',
+      unlocked: user.stats.countyCount >= 3,
+    },
+    {
+      id: 'diary',
+      symbol: '✎',
+      title: 'Første dagboknotat',
+      description: 'Skriv et notat i dagboken til en gjennomført tur.',
+      unlocked: completedTrips.some((item) => Boolean(item.diaryNote?.trim())),
+    },
+    {
+      id: 'goal',
+      symbol: '★',
+      title: 'Månedsmål nådd',
+      description: 'Nå et lagret turmål med daterte turer i den måneden.',
+      unlocked: hasReachedGoal,
+    },
+  ]
+  return (
+    <div id="profile-tab-content">
+      <div className="profile-stats" aria-label="Din turstatistikk">
+        <div>
+          <strong>{user.stats.completedCount}</strong>
+          <span>Gjennomførte turer</span>
+        </div>
+        <div>
+          <strong>{formatKm(user.stats.totalLengthMeters, 1)} km</strong>
+          <span>Registrert rutelengde</span>
+        </div>
+        <div>
+          <strong>{user.stats.countyCount}</strong>
+          <span>Fylker rutene berører</span>
+        </div>
+      </div>
+      <p className="stats-help">
+        Basert på turene du markerer som gjennomført. Lengden er registrert rutelengde, ikke målt
+        distanse du har gått.
+      </p>
+      <section className="monthly-goal" aria-labelledby="goal-heading">
+        <h3 id="goal-heading">Ditt turmål</h3>
+        <form
+          key={`${goalMonth}-${goal?.target || ''}`}
+          onSubmit={(event) => {
+            event.preventDefault()
+            const values = new FormData(event.currentTarget)
+            onSaveGoal(Number(values.get('target')))
+          }}
+        >
+          <label>
+            Måned
+            <input
+              type="month"
+              value={goalMonth}
+              required
+              onChange={(event) => onGoalMonthChange(event.target.value)}
+            />
+          </label>
+          <label>
+            Antall turer
+            <input
+              type="number"
+              name="target"
+              min="1"
+              max="1000"
+              step="1"
+              required
+              defaultValue={goal?.target || 4}
+            />
+          </label>
+          <button disabled={busy || !goalMonth} type="submit">
+            {goal ? 'Endre mål' : 'Sett turmål'}
+          </button>
+          {goal && (
+            <button
+              disabled={busy}
+              className="text-button"
+              type="button"
+              onClick={() => onSaveGoal(null)}
+            >
+              Fjern mål
+            </button>
+          )}
+        </form>
+        {goal ? (
+          <div className="goal-progress">
+            <p role="status">
+              <strong>
+                {monthlyCompleted} av {goal.target} turer
+              </strong>{' '}
+              ·{' '}
+              {monthlyCompleted >= goal.target
+                ? 'Målet er nådd!'
+                : `${goal.target - monthlyCompleted} igjen`}
+            </p>
+            <progress
+              value={Math.min(monthlyCompleted, goal.target)}
+              max={goal.target}
+              aria-label={`${monthlyCompleted} av ${goal.target} turer gjennomført`}
+            />
+          </div>
+        ) : (
+          <p>Sett et mål for måneden og følg fremdriften din.</p>
+        )}
+        <p className="stats-help">
+          Turer teller når de er markert gjennomført og har en dato i turdagboken i denne måneden.
+          Hver rute telles én gang.
+        </p>
+      </section>
+      {selected?.id && (
+        <div className="selected-trip-actions">
+          <h3>{selected.name}</h3>
+          <button disabled={busy} aria-pressed={favorite} onClick={onToggleFavorite}>
+            {favorite ? 'Fjern fra favoritter' : 'Lagre som favoritt'}
+          </button>
+          <button
+            disabled={busy}
+            aria-pressed={user.trips.some((t) => t.id === selected.id && t.status === 'PLANNED')}
+            onClick={() => onSetTripStatus(selected.id!, 'PLANNED')}
+          >
+            Planlegg tur
+          </button>
+          <button
+            disabled={busy}
+            aria-pressed={user.trips.some((t) => t.id === selected.id && t.status === 'COMPLETED')}
+            onClick={() => onSetTripStatus(selected.id!, 'COMPLETED')}
+          >
+            Marker gjennomført
+          </button>
+        </div>
+      )}
+      <section className="profile-badges" aria-labelledby="badges-heading">
+        <div className="badge-heading">
+          <h3 id="badges-heading">Dine merker</h3>
+          <span>
+            {badges.filter((item) => item.unlocked).length} av {badges.length} oppnådd
+          </span>
+        </div>
+        <ul className="badge-grid">
+          {badges.map((item) => (
+            <li key={item.id} className={item.unlocked ? 'achievement earned' : 'achievement'}>
+              <span className="achievement-symbol" aria-hidden="true">
+                {item.symbol}
+              </span>
+              <div>
+                <strong>{item.title}</strong>
+                <span className="achievement-state">
+                  {item.unlocked ? 'Oppnådd' : 'Ikke oppnådd ennå'}
+                </span>
+                <p>{item.description}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <p className="stats-help">
+          Merkene følger din nåværende turhistorikk. Endrer eller fjerner du turstatus, notater
+          eller mål, oppdateres merkene også.
+        </p>
+      </section>
+    </div>
+  )
+}
diff --git a/src/pages/Profile/Profile.css b/src/pages/Profile/Profile.css
new file mode 100644
index 0000000..8f79559
--- /dev/null
+++ b/src/pages/Profile/Profile.css
@@ -0,0 +1,519 @@
+.profile-panel {
+  margin-top: 32px;
+  padding: 26px;
+  background: #fff;
+  border: 1px solid #dce1d7;
+  border-radius: 16px;
+}
+
+.profile-panel h2 {
+  margin: 5px 0 18px;
+}
+
+.profile-panel h3 {
+  margin-top: 26px;
+}
+
+.profile-form {
+  display: grid;
+  gap: 14px;
+  max-width: 420px;
+}
+
+.profile-form label {
+  display: grid;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.profile-form input {
+  font: inherit;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  padding: 11px;
+}
+
+.profile-heading {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.text-button {
+  background: transparent;
+  color: #185b45;
+  padding: 7px 0;
+  text-decoration: underline;
+}
+
+.favorite-list {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.favorite-list button {
+  width: 100%;
+  text-align: left;
+  background: #edf2e9;
+  color: #203b32;
+}
+
+.favorite-list span,
+.favorite-list strong {
+  display: block;
+}
+
+.favorite-list span {
+  font-size: 11px;
+  margin-top: 5px;
+}
+
+@media (max-width: 800px) {
+  .favorite-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+.profile-identity {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.profile-avatar {
+  width: 58px;
+  height: 58px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #dce1d7;
+}
+
+.profile-initial {
+  display: grid;
+  place-items: center;
+  background: #126b51;
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.profile-settings {
+  margin: 20px 0;
+  padding: 16px 0;
+  border-top: 1px solid #e1e5dd;
+  border-bottom: 1px solid #e1e5dd;
+}
+
+.profile-settings summary {
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.profile-settings .profile-form {
+  margin-top: 18px;
+}
+
+.profile-settings input[type='file'] {
+  background: #f7f8f4;
+}
+
+.remove-avatar {
+  justify-self: start;
+}
+
+.auth-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f7f7f1 0%, #e7efe5 100%);
+}
+
+.auth-main {
+  min-height: calc(100vh - 90px);
+  display: grid;
+  place-items: center;
+  padding: 40px 20px;
+}
+
+.auth-card {
+  width: min(100%, 540px);
+  padding: 42px;
+  background: #fff;
+  border: 1px solid #dce1d7;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px #233a3018;
+}
+
+.auth-intro {
+  margin-bottom: 28px;
+}
+
+.auth-intro h1 {
+  font-size: clamp(34px, 5vw, 50px);
+  line-height: 1.05;
+  margin: 10px 0 14px;
+}
+
+.auth-intro > p:last-child {
+  color: #5a6c61;
+}
+
+.auth-card .profile-form {
+  max-width: none;
+}
+
+.auth-card .profile-form button {
+  margin-top: 4px;
+}
+
+.auth-card > .text-button {
+  margin-top: 18px;
+}
+
+.auth-error {
+  color: #9b2c20;
+}
+
+@media (max-width: 600px) {
+  .auth-main {
+    min-height: calc(100vh - 72px);
+    padding: 24px 16px;
+  }
+
+  .auth-card {
+    padding: 28px 22px;
+  }
+}
+
+/* Logoen på innloggingssiden er en knapp. Nullstill knappestilen så den ser ut som før,
+   men vis pekermus. Fokusmarkeringen for tastatur beholdes av hensyn til tilgjengelighet. */
+.brand-button {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+  cursor: pointer;
+}
+.badge-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.badge-heading > span {
+  font-size: 12px;
+  color: #647267;
+}
+.badge-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  list-style: none;
+  padding: 0;
+}
+.achievement {
+  display: flex;
+  gap: 12px;
+  align-items: start;
+  padding: 16px;
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+  background: #f5f6f0;
+}
+.achievement.earned {
+  background: #e7f1e9;
+  border-color: #126b51;
+}
+.achievement-symbol {
+  display: grid;
+  place-items: center;
+  flex: 0 0 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: #e0e5dc;
+  font-size: 20px;
+  font-weight: 700;
+}
+.earned .achievement-symbol {
+  background: #126b51;
+  color: white;
+}
+.achievement strong {
+  font-size: 14px;
+}
+.achievement-state {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+.achievement p {
+  font-size: 12px;
+  color: #647267;
+  margin-bottom: 0;
+}
+@media (max-width: 900px) {
+  .badge-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 600px) {
+  .badge-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.monthly-goal {
+  background: #f5f6f0;
+  border: 1px solid #dce1d7;
+  border-radius: 14px;
+  padding: 20px;
+  margin: 20px 0;
+}
+.monthly-goal h3 {
+  margin: 0 0 14px;
+}
+.monthly-goal form {
+  display: flex;
+  align-items: end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.monthly-goal label {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+}
+.monthly-goal input {
+  font: inherit;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  padding: 10px;
+  min-width: 0;
+}
+.goal-progress progress {
+  width: 100%;
+  height: 16px;
+  accent-color: #126b51;
+}
+.trip-diary {
+  border-top: 1px solid #dce1d7;
+  padding-top: 14px;
+  margin-top: 14px;
+}
+.trip-diary summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.trip-diary form {
+  display: grid;
+  gap: 12px;
+  margin-top: 14px;
+}
+.trip-diary label {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+}
+.trip-diary input,
+.trip-diary select,
+.trip-diary textarea {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  font: inherit;
+  padding: 10px;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  background: white;
+}
+.trip-diary textarea {
+  resize: vertical;
+}
+.profile-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  margin-top: 22px;
+}
+.profile-stats > div {
+  padding: 20px;
+  border-radius: 12px;
+  background: #edf2e9;
+}
+.profile-stats strong {
+  display: block;
+  font-size: 28px;
+  color: #126b51;
+}
+.profile-stats span,
+.stats-help {
+  color: #647267;
+  font-size: 12px;
+}
+.profile-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 24px 0;
+  border-bottom: 1px solid #dce1d7;
+  padding-bottom: 14px;
+}
+.profile-tabs button {
+  background: #f5f6f0;
+  color: #203b32;
+  border: 2px solid transparent;
+}
+.profile-tabs button[aria-pressed='true'],
+.selected-trip-actions button[aria-pressed='true'] {
+  background: #e7f1e9;
+  color: #126b51;
+  border: 2px solid #126b51;
+}
+.selected-trip-actions button {
+  margin: 0 8px 8px 0;
+  border: 2px solid transparent;
+}
+.profile-empty {
+  background: #f5f6f0;
+  border-radius: 12px;
+  padding: 26px;
+}
+.profile-empty p {
+  color: #647267;
+}
+.favorite-list li {
+  background: #edf2e9;
+  border: 1px solid #dce1d7;
+  border-radius: 12px;
+  padding: 12px;
+}
+.favorite-list .trip-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+.favorite-list .trip-actions button {
+  width: auto;
+  font-size: 12px;
+  background: white;
+  border: 1px solid #9cac9e;
+  padding: 8px;
+}
+@media (max-width: 600px) {
+  .profile-stats {
+    grid-template-columns: 1fr;
+  }
+  .profile-heading {
+    flex-wrap: wrap;
+  }
+  .profile-tabs button {
+    flex: 1 1 40%;
+  }
+}
+@media (max-width: 600px) {
+  .auth-main {
+    min-height: calc(100vh - 72px);
+    padding: 24px 16px;
+  }
+  .auth-card {
+    padding: 28px 22px;
+  }
+}
+
+.profile-split {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 32px;
+  margin-top: 28px;
+}
+.profile-split .profile-tabs {
+  display: flex;
+  flex-direction: column;
+  align-self: start;
+  gap: 6px;
+  margin: 0;
+  padding: 0 20px 0 0;
+  border-bottom: 0;
+  border-right: 1px solid #e0e6dc;
+}
+.profile-split .profile-tabs button {
+  text-align: left;
+  width: 100%;
+  padding: 13px 15px;
+  border-radius: 9px;
+  font-size: 14px;
+}
+.profile-content {
+  min-width: 0;
+}
+.profile-content > div > h3:first-child {
+  margin-top: 0;
+}
+@media (max-width: 720px) {
+  .profile-split {
+    grid-template-columns: 1fr;
+    gap: 22px;
+  }
+  .profile-split .profile-tabs {
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-right: 0;
+    border-bottom: 1px solid #e0e6dc;
+    padding: 0 0 16px;
+  }
+  .profile-split .profile-tabs button {
+    flex: 1 1 40%;
+    width: auto;
+  }
+}
+
+.password-field {
+  position: relative;
+  display: block;
+  min-width: 0;
+  border: 1px solid #9cac9e;
+  border-radius: 8px;
+  background: #fff;
+}
+.password-field:focus-within {
+  outline: 2px solid #b9803c;
+  outline-offset: 3px;
+}
+.profile-form .password-field input {
+  box-sizing: border-box;
+  width: calc(100% - 48px);
+  border: 0;
+  background: transparent;
+  padding-right: 11px;
+  outline: none;
+  box-shadow: none;
+}
+.profile-form .password-field .password-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #435e46;
+  cursor: pointer;
+}
+.profile-form .password-field .password-toggle:hover {
+  background: #e9efe4;
+}
+.profile-form .password-field .password-toggle:focus-visible {
+  outline: 2px solid #435e46;
+  outline-offset: 2px;
+}
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..35a2ada
--- /dev/null
+++ b/src/pages/Profile/Profile.tsx
@@ -0,0 +1,366 @@
+import { useEffect, useState, type ChangeEvent, type FormEvent } from 'react'
+import { TOKEN_KEY } from '../../lib/graphql'
+import AuthGate from './AuthGate'
+import OverviewTab from './OverviewTab'
+import {
+  changePassword,
+  fetchMunicipalities,
+  fetchProfile,
+  logoutRequest,
+  saveTripDiary,
+  setHomeMunicipality,
+  setMonthlyGoal,
+  setTripStatus,
+  toggleFavorite,
+  updateProfile,
+  type Municipality,
+  type SelectedRoute,
+  type TripStatus,
+  type UserProfile,
+} from './profileApi'
+import SettingsTab from './SettingsTab'
+import TripsTab from './TripsTab'
+import './Profile.css'
+
+type Tab = 'overview' | 'favorites' | 'trips' | 'settings'
+
+/** Siden «Min profil»: hente profilen, endre den, og velge mellom fanene. */
+export default function Profile({
+  selected,
+  onSelectRoute,
+  disabled,
+  onLogout,
+  onExplore,
+}: {
+  selected: SelectedRoute | null
+  onSelectRoute: (route: SelectedRoute) => void
+  disabled: boolean
+  onLogout?: () => void
+  onExplore: () => void
+}) {
+  const [user, setUser] = useState<UserProfile | null>(null)
+  const [message, setMessage] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [loadingProfile, setLoadingProfile] = useState(true)
+  const [goalMonth, setGoalMonth] = useState(() => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+  })
+  const [passwordMessage, setPasswordMessage] = useState('')
+  const [tab, setTab] = useState<Tab>('overview')
+  const [municipalities, setMunicipalities] = useState<Municipality[]>([])
+  const token = localStorage.getItem(TOKEN_KEY)
+  const loggedIn = Boolean(user)
+
+  // Fanen følger adressen (#profile/trips), så tilbakeknappen og delte lenker virker
+  useEffect(() => {
+    const syncTab = () => {
+      setMessage('')
+      setPasswordMessage('')
+      const target = window.location.hash.split('/')[1]
+      if (
+        target === 'overview' ||
+        target === 'favorites' ||
+        target === 'settings' ||
+        target === 'trips'
+      )
+        setTab(target)
+      else if (target === 'planned' || target === 'completed') setTab('trips')
+      else if (target === 'custom') setTab('favorites')
+    }
+    syncTab()
+    window.addEventListener('hashchange', syncTab)
+    return () => window.removeEventListener('hashchange', syncTab)
+  }, [])
+
+  // Kommunelisten til «Mitt sted» hentes først når brukeren er logget inn
+  useEffect(() => {
+    if (!loggedIn) return
+    const controller = new AbortController()
+    fetchMunicipalities(controller.signal)
+      .then(setMunicipalities)
+      .catch(() => undefined)
+    return () => controller.abort()
+  }, [loggedIn])
+
+  useEffect(() => {
+    if (!token || disabled) return
+    const controller = new AbortController()
+    fetchProfile(token, AbortSignal.any([controller.signal, AbortSignal.timeout(15000)]))
+      .then((profile) => {
+        if (controller.signal.aborted) return
+        setUser(profile)
+        if (!profile) {
+          localStorage.removeItem(TOKEN_KEY)
+          onLogout?.()
+        }
+      })
+      .catch(() => {
+        if (!controller.signal.aborted)
+          setMessage('Kunne ikke hente profilen. Oppdater siden for å prøve igjen.')
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoadingProfile(false)
+      })
+    return () => controller.abort()
+  }, [token, disabled, onLogout])
+
+  /**
+   * Kjører en endring på profilen. Går det bra, vises den oppdaterte profilen og meldingen `success`.
+   * Går det galt, vises feilmeldingen fra serveren, eller `failure`.
+   */
+  async function update(
+    action: (token: string) => Promise<UserProfile>,
+    success: string | null,
+    failure = 'Noe gikk galt.',
+  ) {
+    const currentToken = localStorage.getItem(TOKEN_KEY)
+    if (!currentToken) return
+    setBusy(true)
+    setMessage('')
+    try {
+      setUser(await action(currentToken))
+      if (success) setMessage(success)
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : failure)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function toggleSelectedFavorite() {
+    const routeId = selected?.id
+    if (routeId) void update((t) => toggleFavorite(t, routeId), null)
+  }
+
+  function changeTripStatus(routeId: string, status: TripStatus | null) {
+    void update(
+      (t) => setTripStatus(t, routeId, status),
+      status === 'COMPLETED'
+        ? 'Turen er markert som gjennomført.'
+        : status === 'PLANNED'
+          ? 'Turen er lagt til planlagte turer.'
+          : 'Turstatusen er fjernet.',
+      'Kunne ikke lagre turstatus.',
+    )
+  }
+
+  function saveDiary(routeId: string, form: HTMLFormElement, clear = false) {
+    const values = new FormData(form)
+    void update(
+      (t) =>
+        saveTripDiary(t, routeId, {
+          completedOn: clear ? null : String(values.get('completedOn') || '') || null,
+          diaryNote: clear ? null : String(values.get('diaryNote') || ''),
+          rating: clear || !values.get('rating') ? null : Number(values.get('rating')),
+        }),
+      clear
+        ? 'Dagbokopplysningene er fjernet. Turen er fortsatt gjennomført.'
+        : 'Turdagboken er lagret.',
+      'Kunne ikke lagre dagboken.',
+    )
+  }
+
+  function saveGoal(target: number | null) {
+    void update(
+      (t) => setMonthlyGoal(t, goalMonth, target),
+      target == null ? 'Turmålet er fjernet.' : 'Turmålet er lagret.',
+      'Kunne ikke lagre turmålet.',
+    )
+  }
+
+  function saveProfile(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!user) return
+    const form = new FormData(event.currentTarget)
+    void update(
+      (t) =>
+        updateProfile(t, {
+          email: String(form.get('email') || ''),
+          phone: String(form.get('phone') || ''),
+          avatar: user.avatar || '',
+        }),
+      'Profilen er lagret.',
+    )
+  }
+
+  function saveHomeMunicipality(code: string) {
+    void update((t) => setHomeMunicipality(t, code), 'Stedet er lagret.')
+  }
+
+  async function submitPasswordChange(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const form = event.currentTarget
+    const values = new FormData(form)
+    const currentPassword = String(values.get('currentPassword') || '')
+    const newPassword = String(values.get('newPassword') || '')
+    if (newPassword !== values.get('confirmPassword')) {
+      setPasswordMessage('De nye passordene er ikke like.')
+      return
+    }
+    const currentToken = localStorage.getItem(TOKEN_KEY)
+    if (!currentToken) return
+    setBusy(true)
+    setPasswordMessage('')
+    try {
+      await changePassword(currentToken, currentPassword, newPassword)
+      form.reset()
+      localStorage.removeItem(TOKEN_KEY)
+      setUser(null)
+      onLogout?.()
+    } catch (error) {
+      setPasswordMessage(error instanceof Error ? error.message : 'Kunne ikke endre passordet.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function logout() {
+    const currentToken = localStorage.getItem(TOKEN_KEY)
+    localStorage.removeItem(TOKEN_KEY)
+    setUser(null)
+    setMessage('')
+    onLogout?.()
+    if (currentToken) logoutRequest(currentToken).catch(() => undefined)
+  }
+
+  function chooseAvatar(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    if (
+      !['image/png', 'image/jpeg', 'image/webp', 'image/gif'].includes(file.type) ||
+      file.size > 450000
+    ) {
+      setMessage('Velg et bilde som er mindre enn 450 KB.')
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = () =>
+      setUser((current) => (current ? { ...current, avatar: String(reader.result) } : current))
+    reader.readAsDataURL(file)
+  }
+
+  function openTab(next: Tab) {
+    setMessage('')
+    setPasswordMessage('')
+    setTab(next)
+    window.location.assign(`#profile/${next}`)
+  }
+
+  if (disabled)
+    return (
+      <section className="profile-panel">
+        <h2>Min profil</h2>
+        <p>Profil er tilgjengelig når løsningen kjøres med backend og PostgreSQL.</p>
+      </section>
+    )
+  if (loadingProfile || (!user && token))
+    return (
+      <section id="profile" className="profile-panel">
+        <h2>Min profil</h2>
+        <p role="status">{message || 'Henter profilen …'}</p>
+        <button className="text-button" onClick={logout}>
+          Logg ut
+        </button>
+      </section>
+    )
+  if (!user)
+    return (
+      <AuthGate
+        onAuthenticated={() => window.location.reload()}
+        onSkip={onExplore}
+        onHome={onExplore}
+      />
+    )
+
+  return (
+    <section id="profile" className="profile-panel">
+      <div className="profile-heading">
+        <div className="profile-identity">
+          {user.avatar ? (
+            <img className="profile-avatar" src={user.avatar} alt="Profilbilde" />
+          ) : (
+            <span className="profile-avatar profile-initial" aria-hidden="true">
+              {user.username.charAt(0).toLocaleUpperCase('nb-NO')}
+            </span>
+          )}
+          <div>
+            <p className="eyebrow">MINE TURER</p>
+            <h2>{user.username}</h2>
+          </div>
+        </div>
+        <button className="text-button" onClick={logout}>
+          Logg ut
+        </button>
+      </div>
+      <div className="profile-split">
+        <nav className="profile-tabs" aria-label="Mine turer">
+          {(
+            [
+              ['overview', 'Oversikt'],
+              ['favorites', `Favoritter (${user.favorites.length})`],
+              ['trips', `Mine turer (${user.trips.length})`],
+              ['settings', 'Innstillinger'],
+            ] as const
+          ).map(([key, label]) => (
+            <button
+              key={key}
+              aria-pressed={tab === key}
+              aria-controls="profile-tab-content"
+              onClick={() => openTab(key)}
+            >
+              {label}
+            </button>
+          ))}
+        </nav>
+        <div className="profile-content">
+          {!user.email && (
+            <p className="profile-email-notice">
+              Legg til e-post for å kunne tilbakestille passordet.{' '}
+              <button type="button" className="text-button" onClick={() => openTab('settings')}>
+                Legg til e-post
+              </button>
+            </p>
+          )}
+          {message && <p role="status">{message}</p>}
+          {tab === 'overview' && (
+            <OverviewTab
+              user={user}
+              selected={selected}
+              busy={busy}
+              goalMonth={goalMonth}
+              onGoalMonthChange={setGoalMonth}
+              onSaveGoal={saveGoal}
+              onToggleFavorite={toggleSelectedFavorite}
+              onSetTripStatus={changeTripStatus}
+            />
+          )}
+          {tab === 'settings' && (
+            <SettingsTab
+              user={user}
+              busy={busy}
+              municipalities={municipalities}
+              passwordMessage={passwordMessage}
+              onSaveProfile={saveProfile}
+              onChooseAvatar={chooseAvatar}
+              onRemoveAvatar={() => setUser({ ...user, avatar: null })}
+              onSaveHomeMunicipality={saveHomeMunicipality}
+              onChangePassword={(event) => void submitPasswordChange(event)}
+            />
+          )}
+          {(tab === 'favorites' || tab === 'trips') && (
+            <TripsTab
+              tab={tab}
+              user={user}
+              busy={busy}
+              onExplore={onExplore}
+              onSelectRoute={onSelectRoute}
+              onSetTripStatus={changeTripStatus}
+              onSaveDiary={saveDiary}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/Profile/SettingsTab.tsx b/src/pages/Profile/SettingsTab.tsx
new file mode 100644
index 0000000..25ad6f2
--- /dev/null
+++ b/src/pages/Profile/SettingsTab.tsx
@@ -0,0 +1,123 @@
+import type { ChangeEvent, FormEvent } from 'react'
+import PasswordInput from '../../components/PasswordInput'
+import type { Municipality, UserProfile } from './profileApi'
+
+type Props = {
+  user: UserProfile
+  busy: boolean
+  municipalities: Municipality[]
+  passwordMessage: string
+  onSaveProfile: (event: FormEvent<HTMLFormElement>) => void
+  onChooseAvatar: (event: ChangeEvent<HTMLInputElement>) => void
+  onRemoveAvatar: () => void
+  onSaveHomeMunicipality: (code: string) => void
+  onChangePassword: (event: FormEvent<HTMLFormElement>) => void
+}
+
+/** Innstillinger: profilbilde, kontaktopplysninger, «Mitt sted» og bytte av passord. */
+export default function SettingsTab(props: Props) {
+  const { user, busy, municipalities, passwordMessage } = props
+  return (
+    <div id="profile-tab-content" className="profile-settings">
+      <h3>Profilinnstillinger</h3>
+      <form className="profile-form" onSubmit={props.onSaveProfile}>
+        <label>
+          Profilbilde
+          <input
+            type="file"
+            accept="image/png,image/jpeg,image/webp"
+            onChange={props.onChooseAvatar}
+          />
+        </label>
+        {user.avatar && (
+          <button
+            type="button"
+            className="text-button remove-avatar"
+            onClick={props.onRemoveAvatar}
+          >
+            Fjern profilbilde
+          </button>
+        )}
+        <label>
+          E-post (obligatorisk)
+          <input
+            name="email"
+            type="email"
+            required
+            defaultValue={user.email || ''}
+            autoComplete="email"
+            maxLength={254}
+          />
+        </label>
+        <label>
+          Telefonnummer
+          <input
+            name="phone"
+            type="tel"
+            defaultValue={user.phone || ''}
+            autoComplete="tel"
+            maxLength={20}
+          />
+        </label>
+        <label>
+          Mitt sted (turforslag på forsiden)
+          <select
+            value={user.homeMunicipality?.code ?? ''}
+            disabled={busy}
+            onChange={(event) => props.onSaveHomeMunicipality(event.target.value)}
+          >
+            <option value="">Ikke valgt</option>
+            {municipalities.map((m) => (
+              <option key={m.code} value={m.code}>
+                {m.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button disabled={busy}>Lagre profil</button>
+      </form>
+      <h3>Endre passord</h3>
+      <p>
+        Når passordet endres, logges du ut på alle enheter. Logg inn igjen med det nye passordet.
+      </p>
+      <form className="profile-form" onSubmit={props.onChangePassword}>
+        <label htmlFor="profile-currentPassword">
+          Gjeldende passord
+          <PasswordInput
+            id="profile-currentPassword"
+            name="currentPassword"
+            autoComplete="current-password"
+            required
+            maxLength={200}
+          />
+        </label>
+        <label htmlFor="profile-newPassword">
+          Nytt passord
+          <PasswordInput
+            id="profile-newPassword"
+            name="newPassword"
+            autoComplete="new-password"
+            required
+            minLength={10}
+            maxLength={200}
+          />
+        </label>
+        <label htmlFor="profile-confirmPassword">
+          Bekreft nytt passord
+          <PasswordInput
+            id="profile-confirmPassword"
+            name="confirmPassword"
+            autoComplete="new-password"
+            required
+            minLength={10}
+            maxLength={200}
+          />
+        </label>
+        <button disabled={busy} type="submit">
+          {busy ? 'Vennligst vent …' : 'Endre passord og logg ut'}
+        </button>
+        {passwordMessage && <p role="alert">{passwordMessage}</p>}
+      </form>
+    </div>
+  )
+}
diff --git a/src/pages/Profile/TripsTab.tsx b/src/pages/Profile/TripsTab.tsx
new file mode 100644
index 0000000..88e1152
--- /dev/null
+++ b/src/pages/Profile/TripsTab.tsx
@@ -0,0 +1,147 @@
+import { isUserTrip, type SelectedRoute, type TripStatus, type UserProfile } from './profileApi'
+
+type Props = {
+  /** Favoritter eller turer (planlagte og gjennomførte) */
+  tab: 'favorites' | 'trips'
+  user: UserProfile
+  busy: boolean
+  onExplore: () => void
+  onSelectRoute: (route: SelectedRoute) => void
+  onSetTripStatus: (routeId: string, status: TripStatus | null) => void
+  onSaveDiary: (routeId: string, form: HTMLFormElement, clear?: boolean) => void
+}
+
+/** Lista over favoritter eller turer, med turdagbok for de gjennomførte. */
+export default function TripsTab({
+  tab,
+  user,
+  busy,
+  onExplore,
+  onSelectRoute,
+  onSetTripStatus,
+  onSaveDiary,
+}: Props) {
+  return (
+    <div id="profile-tab-content">
+      <h3>{tab === 'favorites' ? 'Favorittene dine' : 'Mine turer'}</h3>
+      {(tab === 'favorites' ? user.favorites : user.trips).length === 0 ? (
+        <div className="profile-empty">
+          <strong>
+            {tab === 'favorites' ? 'Finn en tur du vil ta vare på' : 'Planlegg din neste tur'}
+          </strong>
+          <p>
+            {tab === 'favorites'
+              ? 'Åpne en rute og lagre den som favoritt.'
+              : 'Velg en favoritt eller søk etter en rute og trykk Planlegg tur.'}
+          </p>
+          <a
+            href="#explore"
+            onClick={(event) => {
+              event.preventDefault()
+              onExplore()
+            }}
+          >
+            Finn en tur →
+          </a>
+        </div>
+      ) : (
+        <ul className="favorite-list">
+          {(tab === 'favorites' ? user.favorites : user.trips).map((item) => (
+            <li key={item.id}>
+              <button
+                className="trip-open"
+                onClick={() => onSelectRoute({ id: item.id, name: item.name, number: item.number })}
+              >
+                <strong>{item.name}</strong>
+                <span>
+                  {tab === 'trips' && isUserTrip(item)
+                    ? item.status === 'COMPLETED'
+                      ? 'Gjennomført · Åpne rute og kart'
+                      : 'Planlagt · Åpne rute og kart'
+                    : 'Åpne rute og kart'}
+                </span>
+              </button>
+              <div className="trip-actions">
+                {(!isUserTrip(item) || item.status !== 'COMPLETED') && (
+                  <button disabled={busy} onClick={() => onSetTripStatus(item.id, 'COMPLETED')}>
+                    Gjennomført
+                  </button>
+                )}
+                {(!isUserTrip(item) || item.status !== 'PLANNED') && (
+                  <button disabled={busy} onClick={() => onSetTripStatus(item.id, 'PLANNED')}>
+                    Planlegg
+                  </button>
+                )}
+                {tab !== 'favorites' && (
+                  <button disabled={busy} onClick={() => onSetTripStatus(item.id, null)}>
+                    Fjern status
+                  </button>
+                )}
+              </div>
+              {tab === 'trips' && isUserTrip(item) && item.status === 'COMPLETED' && (
+                <details className="trip-diary">
+                  <summary>
+                    Turdagbok
+                    {item.completedOn
+                      ? ` · ${new Date(`${item.completedOn}T12:00:00`).toLocaleDateString('nb-NO')}`
+                      : ''}
+                    {item.rating ? ` · ${item.rating}/5` : ''}
+                  </summary>
+                  <form
+                    key={`${item.id}-${item.updatedAt}`}
+                    onSubmit={(event) => {
+                      event.preventDefault()
+                      onSaveDiary(item.id, event.currentTarget)
+                    }}
+                  >
+                    <label>
+                      Dato for turen
+                      <input name="completedOn" type="date" defaultValue={item.completedOn || ''} />
+                    </label>
+                    <label>
+                      Din vurdering
+                      <select name="rating" defaultValue={item.rating || ''}>
+                        <option value="">Ingen vurdering</option>
+                        {[1, 2, 3, 4, 5].map((value) => (
+                          <option key={value} value={value}>
+                            {value} av 5
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label>
+                      Notat
+                      <textarea
+                        name="diaryNote"
+                        defaultValue={item.diaryNote || ''}
+                        maxLength={2000}
+                        rows={4}
+                        placeholder="Hvordan var turen?"
+                      />
+                    </label>
+                    <small>Kun synlig for deg. Maks 2000 tegn.</small>
+                    <div className="trip-actions">
+                      <button disabled={busy} type="submit">
+                        Lagre dagbok
+                      </button>
+                      <button
+                        disabled={busy}
+                        type="button"
+                        onClick={(event) => {
+                          const form = event.currentTarget.form
+                          if (form) onSaveDiary(item.id, form, true)
+                        }}
+                      >
+                        Fjern dagbokopplysninger
+                      </button>
+                    </div>
+                  </form>
+                </details>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/Profile/profileApi.ts b/src/pages/Profile/profileApi.ts
new file mode 100644
index 0000000..5a34525
--- /dev/null
+++ b/src/pages/Profile/profileApi.ts
@@ -0,0 +1,110 @@
+// Typene for profilen og alle GraphQL-kallene mot den. Hver endring gir tilbake den oppdaterte
+// profilen, så siden kan vise resultatet uten et ekstra kall.
+import { graphql } from '../../lib/graphql'
+
+export type Favorite = { id: string; name: string; number: string; createdAt: string }
+export type TripStatus = 'PLANNED' | 'COMPLETED'
+export type UserTrip = Favorite & {
+  status: TripStatus
+  updatedAt: string
+  lengthMeters: number | null
+  completedOn: string | null
+  diaryNote: string | null
+  rating: number | null
+}
+export function isUserTrip(item: Favorite | UserTrip): item is UserTrip {
+  return 'status' in item
+}
+export type Municipality = { code: string; name: string }
+export type UserProfile = {
+  username: string
+  email: string | null
+  phone: string | null
+  avatar: string | null
+  homeMunicipality: Municipality | null
+  favorites: Favorite[]
+  trips: UserTrip[]
+  goals: { month: string; target: number }[]
+  stats: {
+    completedCount: number
+    plannedCount: number
+    totalLengthMeters: number
+    countyCount: number
+  }
+}
+export type SelectedRoute = { id?: string; name: string; number: string }
+
+const PROFILE_FIELDS =
+  'username email phone avatar homeMunicipality{code name} favorites{id name number createdAt} trips{id name number status updatedAt lengthMeters completedOn diaryNote rating} goals{month target} stats{completedCount plannedCount totalLengthMeters countyCount}'
+
+/** Profilen til den innloggede brukeren, eller null hvis tokenet ikke lenger gjelder */
+export const fetchProfile = (token: string, signal: AbortSignal) =>
+  graphql<{ me: UserProfile | null }>(
+    `query($token:String!){me(token:$token){${PROFILE_FIELDS}}}`,
+    { token },
+    signal,
+  ).then((data) => data.me)
+
+/** Kommunene brukeren kan velge som «Mitt sted» */
+export const fetchMunicipalities = (signal: AbortSignal) =>
+  graphql<{ areas: { municipalities: Municipality[] } }>(
+    'query{areas{municipalities{code name}}}',
+    {},
+    signal,
+  ).then((data) => data.areas.municipalities)
+
+export const toggleFavorite = (token: string, routeId: string) =>
+  graphql<{ toggleFavorite: UserProfile }>(
+    `mutation($token:String!,$routeId:ID!){toggleFavorite(token:$token,routeId:$routeId){${PROFILE_FIELDS}}}`,
+    { token, routeId },
+  ).then((data) => data.toggleFavorite)
+
+/** status null fjerner turen fra planlagte og gjennomførte */
+export const setTripStatus = (token: string, routeId: string, status: TripStatus | null) =>
+  graphql<{ setTripStatus: UserProfile }>(
+    `mutation($token:String!,$routeId:ID!,$status:TripStatus){setTripStatus(token:$token,routeId:$routeId,status:$status){${PROFILE_FIELDS}}}`,
+    { token, routeId, status },
+  ).then((data) => data.setTripStatus)
+
+export type TripDiary = {
+  completedOn: string | null
+  diaryNote: string | null
+  rating: number | null
+}
+
+export const saveTripDiary = (token: string, routeId: string, diary: TripDiary) =>
+  graphql<{ saveTripDiary: UserProfile }>(
+    `mutation($token:String!,$routeId:ID!,$completedOn:String,$diaryNote:String,$rating:Int){saveTripDiary(token:$token,routeId:$routeId,completedOn:$completedOn,diaryNote:$diaryNote,rating:$rating){${PROFILE_FIELDS}}}`,
+    { token, routeId, ...diary },
+  ).then((data) => data.saveTripDiary)
+
+/** target null fjerner målet for måneden */
+export const setMonthlyGoal = (token: string, month: string, target: number | null) =>
+  graphql<{ setMonthlyGoal: UserProfile }>(
+    `mutation($token:String!,$month:String!,$target:Int){setMonthlyGoal(token:$token,month:$month,target:$target){${PROFILE_FIELDS}}}`,
+    { token, month, target },
+  ).then((data) => data.setMonthlyGoal)
+
+export const updateProfile = (
+  token: string,
+  details: { email: string; phone: string; avatar: string },
+) =>
+  graphql<{ updateProfile: UserProfile }>(
+    `mutation($token:String!,$email:String,$phone:String,$avatar:String){updateProfile(token:$token,email:$email,phone:$phone,avatar:$avatar){${PROFILE_FIELDS}}}`,
+    { token, ...details },
+  ).then((data) => data.updateProfile)
+
+export const setHomeMunicipality = (token: string, code: string) =>
+  graphql<{ setHomeMunicipality: UserProfile }>(
+    `mutation($token:String!,$code:String){setHomeMunicipality(token:$token,code:$code){${PROFILE_FIELDS}}}`,
+    { token, code },
+  ).then((data) => data.setHomeMunicipality)
+
+export const changePassword = (token: string, currentPassword: string, newPassword: string) =>
+  graphql(
+    'mutation($token:String!,$currentPassword:String!,$newPassword:String!){changePassword(token:$token,currentPassword:$currentPassword,newPassword:$newPassword)}',
+    { token, currentPassword, newPassword },
+  )
+
+export const logoutRequest = (token: string) =>
+  graphql('mutation($token:String!){logout(token:$token)}', { token })
diff --git a/src/placeCategories.ts b/src/placeCategories.ts
deleted file mode 100644
index eba7a4f..0000000
--- a/src/placeCategories.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const placeCategories=[
-  {value:'hut',label:'Hytte',kinds:['alpine_hut','wilderness_hut','chalet']},
-  {value:'shelter',label:'Gapahuk / leskur',kinds:['shelter','lean_to']},
-  {value:'viewpoint',label:'Utsiktspunkt',kinds:['viewpoint']},
-  {value:'picnic_site',label:'Rasteplass',kinds:['picnic_site']},
-  {value:'toilets',label:'Toalett',kinds:['toilets']},
-  {value:'drinking_water',label:'Drikkevann',kinds:['drinking_water']},
-  {value:'parking',label:'Parkering',kinds:['parking']},
-  {value:'camp_site',label:'Campingplass',kinds:['camp_site']},
-  {value:'peak',label:'Topp',kinds:['peak']},
-]
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..d32ff68 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,4 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 2eaed12..e9b131c 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -19,5 +19,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts", "server/*.ts"]
+  "include": ["vite.config.ts", "server/**/*.ts"],
+  "exclude": ["server/**/node_modules", "server/**/node_modules.nosync"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index cc53980..2862eaa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,10 +3,20 @@ import babel from '@rolldown/plugin-babel'
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
+// Backend lokalt (se server/index.ts). På VM-en gjør Apache det samme, se deploy/.
+const BACKEND = 'http://127.0.0.1:4000'
+
 // https://vite.dev/config/
-export default defineConfig({
-  server: { proxy: { '/graphql': 'http://127.0.0.1:4000' } },
-  preview: { proxy: { '/graphql': 'http://127.0.0.1:4000' } },
+export default defineConfig(({ mode }) => ({
+  // Utviklingsserveren ligger i roten. Bygget og forhåndsvisningen ligger under /project2/, som på VM-en
+  base: mode === 'development' ? '/' : '/project2/',
+  server: { proxy: { '/graphql': BACKEND } },
+  // «npm run preview» viser produksjonsbygget, og /project2/graphql sendes til backend slik Apache gjør
+  preview: {
+    proxy: {
+      '/project2/graphql': { target: BACKEND, rewrite: (path) => path.replace('/project2', '') },
+    },
+  },
   // Appen har flere HTML-sider, og alle må listes her for å bli med i npm run build
   build: {
     rollupOptions: {
@@ -16,8 +26,5 @@ export default defineConfig({
       },
     },
   },
-  plugins: [
-    react(),
-    babel({ presets: [reactCompilerPreset()] })
-  ],
-})
+  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
+}))