feat: Hero im Goldenen Schnitt, Cluster als interaktiver Service-Picker (v1.6.0)

- Hero-Layout: zweispaltiges Grid 1.618 : 1 (Goldener Schnitt) — Content
  links, Logo-Cluster rechts; auf Mobile (<lg) gestackt, Cluster ausgeblendet
- Nur noch ein Cluster (statt drei) — groesser, dominanter, das exakte Logo-
  Motiv: Center-Knoten + pulsierender Ring + 5 strahlenfoermige Linien zu
  Aussenknoten in originaler Logo-Anordnung
- Jeder Knoten ist Anker-Link zu einer Leistungs-Karte:
    Center  → Managed Services    (Hauptleistung)
    TR      → Managed Backup
    R       → Hosting
    TL      → ERP-Systeme
    L       → Netzwerk & Infrastruktur
    B       → Nextcloud
- Hover/Focus-Verstaerkung: Knoten skalieren auf 1.7x (Center 1.35x), kraeftiger
  Doppel-Glow, Animation pausiert bei Hover
- Vergroesserte unsichtbare Klickflaeche (.node-hit) fuer komfortable Trefferquote
- Native SVG-Tooltips per <title>; smooth-scroll dank scroll-mt-32 an Karten
- a11y: aria-label am SVG, focus-visible Hervorhebung, prefers-reduced-motion

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-05 00:16:05 +02:00
parent 21cd2c7c3f
commit 57039e188b
5 changed files with 150 additions and 107 deletions
+1 -1
View File
@@ -91,7 +91,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.5.1</span>
<span class="text-ci-gray/60 text-xs">v1.6.0</span>
</div>
<div class="flex items-center gap-6">
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>