Files
sonith-website/CLAUDE.md
T
techadmin 21cd2c7c3f fix: Mesh als Logo-Cluster (v1.5.1)
Das alte Random-Network-Mesh wirkte unbestimmt — neu als drei wiederholte
Sonith-Logo-Sterne in unterschiedlichen Skalen, sodass die Marken-DNA klar
durchscheint.

- Jeder Cluster: zentraler gefuellter Knoten + pulsierender Ring + 5
  strahlenfoermige Linien zu Aussenknoten in der originalen Logo-Anordnung
  (asymmetrisch nach rechts verlaengert wie im CI-Logo)
- Cluster A links-mitte (Skala 6, dominant), Cluster B rechts oben (3.5),
  Cluster C rechts unten (2.5) — gestaffelte Tiefe
- Ring atmet (scale + opacity), Core pulsiert mit Glow, Aussenknoten
  asynchron via inline animation-delay
- Linien als gestrichelte Petrol-Bahnen mit stroke-dashoffset-Datenfluss

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 00:04:59 +02:00

2.7 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).

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.1 (Mesh als Logo-Cluster überarbeitet)