- Würzburger Niederlassung: Am Schlossgarten 1, 97076 Würzburg - Helpdesk-URL korrigiert: helpdesk.sonith.de → hilfe.sonith.de - Fernwartungs-Link (ISL Light Client) als 4. Direktkontakt-Karte und zusätzlich im Mobile-Menü - Hero: drei animierte Floating-Orbs (Petrol & Sonith) für mehr Lebendigkeit, prefers-reduced-motion respektiert - Service-Cards: Akzentfarbe alterniert zwischen Sonith-Gelb und Petrol — bricht den monotonen Eindruck, beide CI-Farben kommen zur Geltung - USP-Cards: subtile Pulse-Aura beim Hover über den Icon-Kreisen Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2.8 KiB
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.4.0 (Adresse Würzburg, Fernwartung, lebendigere Optik)