# Obeco Migration Konzept
*Webseite www.obeco.de – Redesign & Modernisierung*
---
## Ausgangslage
- **URL:** https://www.obeco.de
- **Technologie:** Statisches HTML/CSS (Stand ca. 2014)
- **Struktur:** ~11 Unterseiten + separater Blog (bleibt unverändert)
- **Hosting:** Externer Hoster (FTP/SFTP-Zugang vorhanden)
- **Ziel:** Modernes, responsives Redesign bei unveränderter statischer Technologie
---
## Designentscheidungen (abgestimmt)
| Element | Entscheidung |
|---|---|
| Farbschema | Variante C — Petrol (`#0d6e6e`) |
| Hero | Text links + SVG-Illustration rechts |
| Illustration | Abstrakte IT-Elemente in Petrol-Tönen |
| Footer | Schlicht — nur Copyright, Impressum, Datenschutz |
| Typografie | system-ui, font-weight 500, kein externer Font |
---
## Navigation (abgestimmt)
```
[Logo: Obeco GmbH] [Start] [Leistungen ▾] [Blog ↗] [Support ↗] [Kontakt]
```
- Leistungen-Dropdown: System Automation · Policom · IT-Datenschutz · Bild+Ton · Downloads
- Blog + Support: externe Links mit ↗-Symbol (target="_blank")
- Kontakt: am rechten Ende als Button mit Border
- Keine Topbar / keine zweite Navigationszeile
---
## Vorgehensweise
### Phase 1 – Analyse & Konzept ✅
- Alle Unterseiten gecrawlt und ausgewertet
- Designvorgaben abgestimmt (Farbe, Navigation, Hero, Footer)
- PROJEKT.md für Claude Code erstellt
### Phase 2 – Vorbereitung
- Quelldateien von obeco.de per FTP herunterladen
- PROJEKT.md in lokalen Projektordner legen
### Phase 3 – Umsetzung (Claude Code Desktop App)
- Download: claude.com/download
- Anmelden mit Anthropic-Konto (wie claude.ai)
- Code-Tab → New Session → Projektordner auswählen
- Einstieg: „Lies PROJEKT.md und starte mit Priorität 1"
### Phase 4 – Deployment
- Geänderte Dateien per FTP zum Hoster hochladen
- Browser-Vergleich alt/neu
- Korrekturen zurück zu Phase 3
---
## Technische Randbedingungen
| Punkt | Entscheidung |
|---|---|
| Technologie | Statisch bleibt statisch (kein CMS) |
| Blog | Bleibt separat, wird nicht migriert |
| Icons | Tabler Icons via CDN |
| Claude Code | Desktop App (Windows) — Code-Tab |
---
## Dateien
- `PROJEKT.md` — Übergabedokument für Claude Code (separat)
---
*Erstellt mit Claude.ai — Juni 2026*