# CLAUDE.md — sonith.de Website

> Projektspezifische Anweisungen für Claude Code.

## Projekt

**sonith.de** — Statischer One-Pager für die Sonith GmbH (MSP / Managed Service Provider).

- **Repository**: https://gitea.sonith.de/techadmin/sonith-website
- **Stack**: Pures HTML + CSS + JS, TailwindCSS via CDN
- **Deployment**: Statische Dateien auf eigenem Server (Nginx)

## Projektstruktur

```
sonith-website/
├── CLAUDE.md           # Diese Datei
├── index.html          # One-Pager Hauptseite
├── impressum.html      # Impressum (separate Seite)
├── datenschutz.html    # Datenschutzerklärung (separate Seite)
├── css/
│   └── style.css       # Custom Styles (Animationen, Feintuning)
├── js/
│   └── main.js         # Mobile Menu, Smooth Scroll, Scroll-Spy
├── img/
│   ├── logo.svg        # Original-Logo (CI-konform, fuer hellen BG)
│   └── logo-light.svg  # Helle Variante fuer dunklen BG (auf der Seite verwendet)
├── src/                # CI-Quelldateien (nicht oeffentlich serven)
│   ├── Logo und CI Handbuch.pdf
│   └── logo.svg        # Original-SVG vom Designer
├── fonts/              # Inter-Font (lokal gehostet, DSGVO-konform)
├── .gitignore
└── README.md
```

**Hinweis:** `src/` enthält interne CI-Quelldateien und sollte vom Webserver
ausgeschlossen werden (z. B. via Nginx-`location /src { deny all; }`).

## Farbschema (CI-konform)

Quelle: `src/Logo und CI Handbuch.pdf` (Sonith UG, Apr 2019).

**Logofarben** (Primär):
- `#DEDC1E` — Sonith Gelb-Grün (Pantone 381 C) — Hauptakzent
- `#848687` — CI-Grau (Pantone 424 C) — Subtexte
- `#C8C9CA` — CI-Hellgrau (Pantone Coolgray 5 C) — Fließtext auf dunkel

**Störer-/Gegenfarbe** (Sekundär):
- `#067391` — Petrol (Gegenfarbe Logo) — Sekundär-Buttons, Borders, Akzente
- `#3a96b0` — Petrol hell (Hover)
- `#045066` — Petrol dunkel (Borders/Töne)

**Hintergrund** (petrol-getöntes Dunkel statt generisches Slate):
- `#0a1f28` — Basis (`bg-dark`)
- `#102b38` — Sektion alternierend (`bg-dark-light`)
- `#1a3d4d` — Akzent-Hintergrund (`bg-dark-lighter`)

Tailwind-Tokens: `sonith`, `petrol`, `ci-gray`, `dark` — siehe Tailwind-Config inline in den HTML-Dateien.

Grundstimmung: Dunkel-modern, Sonith-Gelb als Hauptakzent, Petrol als Sekundärakzent (entspricht der CI-Vorgabe „Störer- und Gegenfarbe Logo").

## Konventionen

- Keine Build-Tools, kein Node.js — alles statisch
- TailwindCSS ausschließlich via CDN
- Inhalte auf Deutsch
- SVG-Icons inline im HTML
- Responsive, Mobile-first

## Deployment

Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.

---

*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)*